Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop: 35+ Text-Effekte zum Nachbauen

Text-Tutorials sind recht beliebt, um bei Einladungen, dem eigenen Poster oder einem Banner im Netz schnell zu guten Ergebnissen zu gelangen, wenn sehenswerte Überschriften gefragt sind. Da kann der Schriftzug glühen wie Magma, kalt aus Eis geformt sein oder wie süßer Honig fast zufällig ein Wort ergeben. Aber auch die zahlreichen 3D-Effekte sind erstaunlich.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Anfänger-Tipps für Seitenbetreiber

WordPress gibt es schon relativ lange. Schon sehr früh wurde mir klar, dass dies das beste CMS ist, mit dem auch Laien ihre eigene Website verwalten können. Als Blogger-Software gestartet – und zunächst verschrien – gehört WordPress mittlerweile zu den am meisten verbreiteten Content-Management-Systemen im Netz. Es ist sehr intuitiv und auch für Website-Anfänger recht einfach zu erlernen. Natürlich ist es komplexer geworden, gerade für professionelle Seiten, die Möglichkeiten sensationell, doch die intuitive Bedienbarkeit ist meines Erachtens erhalten geblieben. Daher setze ich seit über 10 Jahren auf WordPress bei Business-Websites.

Kategorien
(Kostenlose) Services Essentials Fortbildung Inspiration Programmierung Showcases Tutorials

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung waren auf diese Weise völlig von sämtlichen Bildungsmöglichkeiten abgeschnitten. Das Internet ist angetreten, all das zu verändern. Heutzutage ist die Chance auf Bildung nur die Frage einer funktionierenden Netzverbindung.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Sonstige Programme Tutorials

Best of Gimp: 40 professionelle Tutorials plus erlesene Profi-Tipps

The Gimp ist die freie Bildbearbeitungssoftware schlechthin. Kostenlos, leistungsstark und von einer großen Community getragen. Da verwundert es kaum, dass es auch hier zahlreiche großartige Tutorials zu entdecken gibt. Die schönsten Beiträge wir in diesem Artikel gesammelt, gewürzt mit einigen Tipps und Tricks.

Tutorials zu Photoshop, Illustrator und WordPress? Bitte hier entlang.

gimp-teaser

Tutorial: The creepy zombie hand of death!

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 5 von 6
Thema: Komposition
gimp1

© devvv

Tutorial: Glow FX extreme

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 3 von 6
Thema: Lichteffekte
gimp2

© devvv

Creating a Diorama Effect

Website: gimp-tutorials.net
Urheber: Gimper
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp3

© Gimper

Graffiti Tutorial

Website: gimp-tutorials.net
Urheber: sglider12
Schwierigkeitsgrad: 1 von 6
Thema: Text-Effekt
gimp4

© sglider12

Light Painting in Gimp

Website: puteraaladin.blogspot.in
Urheber: Starlight86
Schwierigkeitsgrad: 4 von 6
Thema: Bildeffekt
gimp5

© Starlight86

How to make Photographs Vintage in GIMP

Website: scottphotographics.com
Urheber: Michael Scott
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp6

© Michael Scott

How to make a Globe/Planet photo manipulation in GIMP

Website: scottphotographics.com
Urheber: Michael Scott
Schwierigkeitsgrad: 3 von 6
Thema: Bildeffekt
gimp7

© Michael Scott

Brains Icon

Website: gimp-tutorials.net
Urheber: Gimper
Schwierigkeitsgrad: 4 von 6
Thema: Icon-Gestaltung
gimp8

© Gimper

Make An Extremely Real Letter In GIMP

Website: gimp-tutorials.net
Urheber: Gimper165
Schwierigkeitsgrad: 3 von 6
Thema: Komposition
gimp9

© Gimper165

Process: Full Spectrum Circle Effect

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 3 von 6
Thema: Farbeffekt
gimp10

© Starlight86

 

Gimp-Kurztipp #1: Hochpass-Schärfung mit Gimp

01 Skript installieren

Noch steht Ihnen dieser Filter nicht zur Verfügung. Gehen Sie dazu auf gimp.org und laden Sie das Skript herunter. Das Skript wird einfach in dem Ordner C:Programme / GIMP 2 / share / gimp /2.0 / scripts abgelegt. In Gimp gehen Sie danach auf Filter > Skript-Fu > Skripte auffrischen.

gimp1

02 Hochpass-Filter anwenden

Gehen Sie im Menü auf Ebene > Neu aus Sichtbaren und dann auf Filter > Allgemein > High Pass Filter. Im Dialog-Fenster geben Sie den Radius des Filters an der bestimmt, wie viele Details übernommen werden. Probieren Sie einen Radius von 5 aus und bestätigen Sie über OK.

gimp2

03 Füllmethode: Überlagern

Stellen Sie den Ebenenmodus von Normal auf Überlagern um. Ist der Effekt zu stark, so reduzieren Sie einfach die Ebenendeckkraft.

gimp3

 

Split-toning in GIMP

Website: gimp-tutorials.ne
Urheber: Gimper
Schwierigkeitsgrad: 1 von 6
Thema: Bildeffekt
gimp11

© Gimper

The Ultimate Gimp Planet Tutorial

Website: mygimptutorial.com
Urheber: mygimptutorial.com
Schwierigkeitsgrad: 3 von 6
Thema: Komposition
gimp12

© mygimptutorial.com

Gimp Tutorial: Experiment on 3D Text Effect in Gimp

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 3 von 6
Thema: Text-Effekt
gimp13

© Starlight86

Gimp Tutorial: Creating Dark Surreal Image in Gimp and Irfan View

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 4 von 6
Thema: Bildkomposition
gimp14

© Starlight86

Glossy bolt tutorial in GIMP

Website: gimp-tutorials.net
Urheber: sglider12
Schwierigkeitsgrad: 3 von 6
Thema: Icon-Gestaltung
gimp15b

© sglider12

Gimp Tutorial: Add HDR-like effect to a normal potrait picture

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp16

© Starlight86

Tutorial: Masking hair with fine strands

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 3 von 6
Thema: Freistellen
gimp17

© devvv

Leopard’s Aurora Borealis wallpaper in GIMP

Website: abduzeedo.com
Urheber: Abduzeedo
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp18

© Abduzeedo

Making Skies dramatic in GIMP

Website: scottphotographics.com
Urheber: Michael Scott
Schwierigkeitsgrad: 3 von 6
Thema: Bildeffekt
gimp19

© Michael Scott

Tutorial: Creating a Vista-like wallpaper

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp20

© devvv

 

Gimp-Kurztipp #2: Dodge & Burn

01 Anwendung vorbereiten

Gehen Sie im Menü auf Ebene > Neue Ebene und bestätigen Sie über OK. Stellen Sie die Vordergrundfarbe auf HTML-Notation #808080 ein und gehen Sie auf Bearbeiten > Mit Vordergundfarbe füllen. Stellen Sie die Füllmethode von Normal auf Überlagern um.

gimp4

02 Dodge & Burn

Mit der Dodge & Burn-Technik können Sie nun gezielt die Lichtsitation im Bild beeinflussen. Wählen Sie das Werkzeug Abwedeln / Nachbelichten an und setzen Sie die Deckkraft des Werkzeuges auf 40% herab. Mit dem Typ: Abwedeln können Sie Bereiche aufhellen, mit dem Typ: Nachbelichten Bereiche abdunkeln. So können Sie Porträts weitaus räumlicher gestalten.

gimp5

 

Super Slick Dusky Lighting Effects in Gimp

Website: gimp-tutorials.net
Urheber: sick
Schwierigkeitsgrad: 4 von 6
Thema: Lichteffekt
gimp21

© sick

Creative Composition

Website: gimp-tutorials.net
Urheber: ajit
Schwierigkeitsgrad: 3 von 6
Thema: Komposition
gimp22

© ajit

Gimp Tutorial: Awesome Bokeh Effect in Gimp

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 3 von 6
Thema: Bildeffekt
gimp23

© Starlight86

Tutorial: Beautiful Parrot Photo Manipulation in Gimp

Website: gimp-tutorials.net
Urheber: starlight86
Schwierigkeitsgrad: 4 von 6
Thema: Bildkomposition
gimp24

© starlight86

Creating Fireball and Explosion effect in Gimp

Website: gimp-tutorials.net
Urheber: starlight86
Schwierigkeitsgrad: 5 von 6
Thema: Bildkomposition
gimp25

© starlight86

Cool Typography Design Poster in Gimp

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 3 von 6
Thema: Text-Effekt
gimp26

© Starlight86

Beautiful Planet Effect in Gimp Tutorial

Website: puteraaladin.blogspot.de
Urheber: Starlight86
Schwierigkeitsgrad: 4 von 6
Thema: Bildkomposition
gimp27

© Starlight86

Tutorial: Exploding Planet

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 4 von 6
Thema: Bildeffekt
gimp28

© devvv

Sun Ray Effect

Website: gimp-tutorials.net
Urheber: roy
Schwierigkeitsgrad: 1 von 6
Thema: Bildeffekt
gimp29

© roy

Recoloring Eyes for Gimp

Website: droz928.deviantart.com
Urheber: Jacob Dillon
Schwierigkeitsgrad: 1 von 6
Thema: Bildmanipulation
gimp30

© Jacob Dillon

 

Gimp-Kurztipp #3: Pfeile zeichnen

01 Funktionen aktivieren

Auch für die Pfeile müssen Sie wieder ein Skript von gimp.org unter C:Programme / GIMP 2 / share / gimp /2.0 / scripts speichern. Gehen Sie auf Filter > Skript-Fu > Skripte auffrischen. Die Pfeil-Funktion können Sie über Werkzeuge > Pfeil aufrufen.

gimp6

02 Pfeil zeichnen

Wählen Sie das Pfade-Werkzeug an und klicken Sie zweimal in das Dokument. Bitte beachten Sie: Der erste Klick steht für die Pfeilspitze. Nach Werkzeuge > Pfeil wird ein recht großes Dialog-Fenster mit zahlreichen Optionen angeboten. Bestimmen Sie darin etwa die Größe der Spitze. Achten Sie darauf, dass die aktuelle Vordergundfarbe die Farbe des Pfeiles bestimmt.

gimp7

 

Draw An Angry Cat

Website: kalaalog.com
Urheber: kalaalog.com
Schwierigkeitsgrad: 5 von 6
Thema: Digitales Malen
gimp31

© kalaalog.com

Tutorial: Splash Screen: Create a colorful stream of light with particles

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp32

© devvv

Gimp tutorial – How to create a nice dotted background

Website: armino.ro
Urheber: Armino
Schwierigkeitsgrad: 1 von 6
Thema: Textureffekt
gimp33

© Armino

Tutorial: Infrared / Monochrome Effect

Website: gimpusers.com
Urheber: devvv
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp34

© devvv

Creating an Urban-Style Piece of Artwork

Website: sglider12.blogspot.de
Urheber: Sarah Davison
Schwierigkeitsgrad: 3 von 6
Thema: Bildkomposition
gimp35

© Sarah Davison

Create a real photo print

Website: gimp.pixtuts.com
Urheber: gimp.pixtuts.com
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp36

© gimp.pixtuts.com

Photomanipulating Nebula Clouds -Tutorial for Gimp

Website: alienbu.deviantart.com
Urheber: AlienBU
Schwierigkeitsgrad: 3 von 6
Thema: Bildeffekt
gimp37

© AlienBU

Gimp DROSTE effect TUTORIAL

Website: lostknightkg.deviantart.com
Urheber: lostknightkg
Schwierigkeitsgrad: 1 von 6
Thema: Bildeffekt
gimp38

© lostknightkg

How to remove the background from an image using the Gimp

Website: tutorialgeek.blogspot.de
Urheber: tutorialgeek.blogspot.de
Schwierigkeitsgrad: 2 von 6
Thema: Freistellen
gimp39

© tutorialgeek.blogspot.de

How to make a photograph Lomographic in GIMP

Website: scottphotographics.com
Urheber: Michael Scott
Schwierigkeitsgrad: 2 von 6
Thema: Bildeffekt
gimp40

© Michael Scott

(dpe)

Kategorien
Design HTML/CSS Inspiration Showcases Tutorials

Webdesigners Mitnahme-Markt: 40 CSS-Buttons, Beispiele, Tutorials und Code-Schnipsel

Reine CSS-Button und -Menüs benötigen keine Grafiken mehr, sondern formen sich aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn Sie an eine umfassende Browser-Kompatibilität denken. Wie gut, dass es Tutorials, fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Lust auf eine Dosis Photoshop?

Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, sollten Sie vor der konkreten Verwendung die aktuelle Lizenz noch einmal überprüfen. Sicher ist sicher.

CSS Buttons with Pseudo-elements

Urheber: Sergio Camalich
Website: tympanus.net

Sergio zeigt gleich die Entstehung einer ganzen Button-Serie. In einem Tutorial werden diese erklärt und eine Demo, wie auch der Sourcecode, zum Herunterladen angeboten.

css-button1

© Sergio Camalich

Animated CSS3 Buy now Button

Urheber: Mike
Website: nublue.co.uk

In diesem Einsteiger-Tutorial können wir die Entstehung eines animierten Shop-Buttons verfolgen. So wird der Preis noch einmal angezeigt, wenn der Anwender über der Schaltfläche steht.

css-button2

© Mike

CSS Deck

Urheber: Bartos Lazarski
Website: cssdeck.com

CSS Deck bietet uns verschiedenste CSS-Generatoren an, wobei ich Ihnen diesen schönen Shop-Button vorstellen möchte. HTML- und CSS-Code können leicht kopiert werden.

css-button3

© Bartos Lazarski

How to Create CSS3 Buttons

Urheber: Valeriu Timbuc
Website: designmodo.com

Valeriu Timbuc stellt uns eine ovale Buttonform in verschiedenen Farbvarianten vor. Schritt für Schritt werden in diesem Tutorial die HTML- und CSS-Abschnitte erklärt.

css-button4

© Valeriu Timbuc

Code an Awesome Animated Download Button With CSS3

Urheber: Joshua Johnson
Website: designshack.net

In diesem Tutorial zeigt Joshua Johnson, wie ein Button zwei weitere Flächen bei MouseOver präsentieren kann. Zunächst wird das Konzept erklärt, dann der CSS-Code.

css-button5

© Joshua Johnson

Animated Buttons with CSS3

Urheber: Mary Lou
Website: tympanus.net

In diesem Tutorial wird ein Button in verschiedenen Farbvarianten und mit unterschiedlichen Icons als Blickfang vorgestellt. Sieben Beispiele werden mit dem kompletten CSS-Code durch gespielt.

css-button6

© Mary Lou

40+ CSS Buttons from codepen

Urheber: Codepen
Website: saaraan.com

Gleich 40 verschiedene Buttons werden uns in dieser Kollektion vorgestellt. Da gibt es ganz einfach 2D-Button, bis hin zu komplexen Versionen, wie etwa diese runden Button hier.

css-button7

© Codepen

CSS3 Animated Bubble Buttons

Urheber: Martin Angelov
Website: tutorialzine.com

Der Bubble Button von Martin Angelov zeigt beim MouseOver eine kleine Animation. Ganz dem Namen entsprechend, laufen einige Bubbles schnell über die Fläche des Buttons ab.

css-button8

© Martin Angelov

BonBon

Urheber: simurai
Website: simurai.com

Süße CSS-Button im BonBon-Stil. Eine experimentelle Demo mit 3D-Formen und Glanzeffekten.

css-button9

© simurai

Create a Circle Social Button in CSS3

Urheber: Anli
Website: azmind.com

Runde Social-Buttons mit zentrierten Icons werden in diesem Tutorial beschrieben. Als Besonderheit erscheint um den Button eine Kontur, die farbig umgesetzt wurde.

css-button10

© Anli

CSS3 Buttons With a Glass Edge

Urheber: Rob Alan
Website: robalan.com

Eine neutrale, graue Version und eine knallige, rote Version eines CSS-Buttons hat Rob Alan programmiert. HTML- und CSS-Code werden im Beitrag präsentiert.

css-button11

© Rob Alan

Tutorial: CSS3 push-down Buttons

Urheber: Jo
Website: joquery.com

Die CSS3-Button von Jo stehen zunächst dreidimensional hervor, um bei einem Klick wie die Tasten einer Tastatur zu reagieren.

css-button12

© Jo

Super Awesome Buttons with CSS3 and RGBA

Urheber: Mark
Website: zurb.com

In diesem Tutorial kommen CSS3- und RGBa-Tricks zum Einsatz, um eine ganze Serie von Buttons in verschiedenen Farben zu gestalten.

css-button13

© Mark

CSS3 Minimalistic Navigation Menu

Urheber: Martin Angelov
Website: tutorialzine.com

Ein CSS3-Menü mit Animation stellt uns Martin Angelov vor. Eine Demo und ein Download stehen neben dem Tutorial bereit, uns zu begeistern.

css-button14

© Martin Angelov

CSS3 Tutorial: Sleek Card Pockets using CSS Only

Urheber: Vince Angeloni
Website: creativefan.com

Im CSS3-Tutorial von Vince Angeloni können wir die Entstehung eines Buttons verfolgen, der zunächst nur teilweise sichtbar ist. Erst beim MouesOver sehen wir den Inhalt des Buttons.

css-button15

© Vince Angeloni

How to Build a Simple Button with CSS Image Sprites

Urheber: Chris Spooner
Website: line25.com

Chris Spooner stellt in diesem Tutorial eine einfache Variante eines CSS-Buttons vor, der Sprites als Basis einsetzt.

css-button16

© Chris Spooner

CSS3 Speech Bubble

Urheber: Sean
Website: sublimeorange.com

Die Demo zeigt, wie aus einem Button schnell eine Sprechblase werden kann. Auch der Code dazu wird präsentiert.

css-button17

© Sean

Advanced CSS Menu

Urheber: Nick La
Website: webdesignerwall.com

In diesem Tutorial finden Sie eine Demo, die Daten als Download und eine ausführliche Beschreibung des Autors, wie dieses Grunge-Menü entstanden ist.

css-button18

© Nick La

3D Buttons in CSS

Urheber: Elad Shechter
Website: coderwall.com

Elad Shechter simuliert die Tastankappen einer Tastatur. Grau, leicht dreidimensional und bei Anklicken der typische Effekt des Reindrückens.

css-button19

© Elad Shechter

How To Create Shiny CSS Buttons

Urheber: Paulund
Website: paulund.co.uk

Etwas HTML, viel mehr CSS und schon steht dieser Button. Als kleine Besonderheit sorgt ein CSS-Schein für ein Highlight.

css-button20

© Paulund

Sliding Tags

Urheber: Thibaut
Website: cssflow.com

Auf cssflow.com können Sie Tags in Button-Form entdecken. Es gibt eine Demo, einen Download und auch einen Artikel, der die Entstehung beschreibt.

css-button21

© Thibaut

Codepen

Urheber: Codepen
Website: codepen.io

Auf codepen.io werden zahlreiche CSS-Buttons und -Menüs vorgstellt. So auch dieses dreidimensionale Menü mit Icons.

css-button22

© Codepen

Inset Side Navigation

Urheber: CSSFlow
Website: cssflow.com

Ein vertikales Menü mit einzelnen Buttons, die auf einer Grundfläche liegen, präsentiert uns CSSFlow. Schauen Sie sich die Demo an oder klicken Sie gleich auf den Download-Button.

css-button23

© CSSFlow

Button Maker

Urheber: CSS-Tricks
Website: css-tricks.com

CSS-Tricks ist ein Button-Generator, der sich über Schieberegler sehr einfach bedienen lässt. Neben der Größe und der Rundheit können Sie Verläufe und MouseOver-Zustände definieren.

css-button24

© CSS-Tricks

App Navigation with Notification Badges

Urheber: CSSFlow
Website: cssflow.com

Eine Menüleiste mit kleinen Badges zur Information, ob es neue Profile oder Nachrichten gibt. Eine Demo und ein Download warten auf Sie.

css-button25

© CSSFlow

CSS Menu Maker

Urheber: CSS Menu Maker
Website: cssmenumaker.com

Der CSS Menu Maker zeigt eine Auswahl von Stilen, die nach einem Klick angepasst werden können. Die Unterteilung erfolgt in Drop Down, Flyout, Vertical, Horizontal und Tabbed.

css-button26

© CSS Menu Maker

Share Buttons

Urheber: CSSFlow
Website: cssflow.com

Schöne 3D-Social-Buttons, die zum Anklicken reizen. Die Anzahl der Empfehlungen in den sozialen Netzen wird dabei angezeigt.

css-button27

© CSSFlow

CSS Menu Generator

Urheber: mycssmenu.com
Website: mycssmenu.com

Wählen Sie aus zahlreichen Vorgaben eine Menügrundlage aus. Diese passen Sie dann in wenigen Schritten an.

css-button28

© mycssmenu.com

Social Buttons

Urheber: CSSFlow
Website: cssflow.com

Einfache Social-Media-Buttons zur leichten Anpassung. Eine Demo und ein Download unterstützen den Anwender.

css-button29

© CSSFlow

Glossy Buttons

Urheber: CSSFlow
Website: cssflow.com

Glänzende CSS-Buttons in verschiedenen Farbvarianten. Demo und Download sind nur einen Klick entfernt.

css-button30

© CSSFlow

Dark and Light Dropdown Lists

Urheber: CSSFlow
Website: cssflow.com

Ein CSS-Button in zwei Varianten: eine helle und eine dunkle Version. Demo und Download sind natürlich auch hier vorhanden.

css-button31

© CSSFlow

CSS Menu Builder

Urheber: CSS Menu Builder
Website: cssmenubuilder.com

Der CSS Menu Builder bietet uns einige fertige horizontale und vertikale Menüs zur Auswahl an. In nur vier Schritte können diese angepasst werden, bis hin zur Beschriftung.

css-button32

© CSS Menu Builder

Dark Button Navigation Using CSS3

Urheber: Monji Dolon
Website: devgrow.com

Nach der Online-Demo und un den Downloaddateien werden CSS- und HTML-Code beschrieben. So entsteht ein vertikales Menü mit einzelnen Buttons auf einer Fläche.

css-button33

© Monji Dolon

Build Awesome Practical CSS3 Buttons

Urheber: Jeffrey Way
Website: tutsplus.com

Jeffrey Way erklärt in diesem Tutorial auf net.tutsplus.com die Programmierung eines CSS-Buttons mit Icon. Auch ein Video-Tutorial unterstützt uns beim Lernen.

css-button34

© Jeffrey Way

Awesome Animated CSS Button Tutorial and Source Code

Urheber: Jay Patel
Website: way2tutorial.com

Sehr schön ist hier der Wechsel vom normalen Button hin zur angeklickten Version zu sehen. Im Tutorial wird das Konstrukt ausführlich erklärt.

css-button35

© Jay Patel

CSS3 Gradient Buttons

Urheber: Nick La
Website: webdesignerwall.com

Nick La zeigt an seiner Webdesignerwall eine Massenproduktion von CSS-Button in verschiedensten Farben und mit unterschiedlichen Rundungen und Größen.

css-button36

© Nick La

Awesome CSS3 & JQUERY Slide Out Button

Urheber: Mary Lou
Website: tympanus.net

Immer öfter wird die Option verwendet, sich über einen bestehenden Account bei Diensten wie Twitter oder Facebook bei neuen Diensten einzuloggen. Dazu wird hier ein passender Button angeboten.

css-button37

© Mary Lou

Nice Menu : CSS Animation & jQuery Animate

Urheber: Hidayat Sagita
Website: webstuffshare.com

Hidayat Sagita stellt nach der Download- und Demo-Option seinen Button in zwei Varianten vor: einmal mit CSS- und einmal mit jQuery-Animation.

css-button38

© Hidayat Sagita

CSS Button Me

Urheber: Caleb Ogden
Website: cssbutton.me

Der Generator CSS Button Me bietet zahlreiche Regler an, etwa zu Border, Gradients, Box Shadow, Font und einige mehr.

css-button39

© Caleb Ogden

Pure CSS social media icons

Urheber: Nicolas Gallagher
Website: nicolasgallagher.com

Reine Social-CSS-Button sind je nach Komplexität sehr schwierig zu gestalten. Nicolas Gallagher zeigt, wie es geht.

css-button40

© Nicolas Gallagher

(dpe)

Kategorien
Fortbildung Inspiration JavaScript & jQuery Programmierung Tutorials

JavaScript und jQuery: Mit diesen Tutorials gelingt der Einstieg auf jeden Fall

Wenn man etwas Neues lernen will, ist es wichtig, von Anfang an gute Quellen zu verwenden. Schlechte Lernquellen vermitteln unqualitatives, häufig auch fehlerhaftes Wissen. So ist es überall – natürlich auch beim Erlernen von JavaScript. Ich habe daher im folgenden Beitrag einige zuverlässige Websites mit Anleitungscharakter zusammengestellt. Die Tutorials zu jQuery sind dabei nicht nur für Einsteiger interessant. Da kann sicherlich der ein oder andere Profi sein Wissen mindestens aufpolieren.


(Bildquelle: shutterhacks auf Flickr | CC-BY-SA)

JS The Right Way: ein Leitfaden für JavaScript-Anfänger

Um Missverständnisse rund um JavaScript zu vermeiden und zu verhindern, dass Anfängern fehlerhaftes Wissen vermittelt wird, kreierte William Oliveira unter JS the right way einen sehr nützlichen Leitfaden, der uneingeschränkt empfehlenswert ist.

Was ist „JS The Right Way“?

Hinter der Entstehung von „JS The Right Way“ steckt die Motivation, Anfängern in JavaScript qualitativ hochwertiges Wissen zu vermitteln. Die Webseite stellt einen Leitfaden dar, welcher Quellen mit nützlicher Lehrinformation aufzeigt. Er beginnt mit einer kleinen Einleitung, die das Ziel des Tutorial erklärt. Der Guide befindet sich noch in der Aufbauphase, wobei einige gute Sachen schon eingefügt sind. Jeder kann zum Aufbau beitragen, Vorschläge werden vor einer eventuellen Integration sorgfältig überprüft.

Bisheriger Umfang des Leitfadens

Nach der Einleitung und einigen Erläuterungen zum entstehenden Guide startet man mit dem Leitfaden. Darin finden Sie Quellen zum Thema JavaScript, die der Betreiber für seriös und gut befunden hat. Als erstes wird kurz erklärt, was JavaScript eigentlich ist und wie sich die Verwendung entwickelt hat. Längst ist JavaScript zu einem der Motoren des Web geworden, was Beispiele wie das serverseitige Framework node.js eindrücklich belegen.


node.js: Server-side JavaScript

Als weitere gute Quelle, welche zahlreiche Referenzen, Neuigkeiten rund um JavaScript sowie verschiedene Versionen davon enthält, wird das Mozilla Developer Network vorgestellt.


Referenzen und Neuigkeiten rund um JavaScript finden Sie auf Mozilla Developer Network

Weiter geht es mit Stil. Hier wird ein Styleguide mit einem interessanten Namen empfohlen: Idiomatic. Um den Code sauber zu bekommen, sollten Sie das Tool JSHint benutzen.


Ein Guide für JS-Anfänger: Idiomatic.js


Zahlreiche Patterns werden vorgestellt

Ein Beispiel hierfür kommt aus der Rubrik „Creational Design Patterns“ und stammt von Addy Osmani.


Factory Patterns: ein Ausschnitt aus dem Code

Wo gehobelt wird, da fallen Späne. Dennoch sollte man versuchen, durch gezielten Einsatz des Hobels so wenig Späne wie möglich zu erzeugen. Hierzu bieten sich Testing Tools an. Auch zu diesem Thema finden Sie einige gute Quellen. Zum Beispiel Mocha, ein Framework zum Testen von JavaScript.


Mocha: ein Code-Beispiel

Zur Weiterbildung sind Bücher sowie auch Kontakte zu wichtigen Leuten in diesem Bereich nützlich. Eine Liste kostenloser JS-eBooks wird vorgestellt. Ebenfalls in Listenform findet sich eine Übersicht interessanter JS-Profis, denen zu folgen sich nicht nur für Anfänger lohnt.


Kostenlose JS-Bücher

Listen finden sich noch etliche, so etwa solche mit JavaScript PaaS Providern, JavaScript Package Managern und Frameworks. Es kann als sicher gelten, dass Sie etwas Nützliches für sich finden werden.

jQuery-Tutorials nicht nur für Anfänger

Vielleicht beschäftigen Sie sich schon eine Weile mit Webdesign und kennen sich in HTML5, CSS und anderen Sprachen gut aus. Vielleicht sind Sie ein Anfänger im Webdesign und beginnen erst, diese wunderbare Welt zu erforschen. Auf jeden Fall ist Ihnen der Begriff „jQuery“ schon viele male begegnet. Ob Sie ein Profi darin sind oder – wie ich – noch keine Ahnung davon haben, werden Ihnen die folgenden Tutorials der Website jQuery Fundamentals sicherlich behilflich sein.


(Bildquelle: methodshop auf Flickr | CC-BY-SA)

jQuery Fundamentals

Wir beginnen mit einem englischsprachigen Tutorial von Bocoup, einer Open Web Technology Firma. Der Name des Tutorial lautet erklärend: jQuery Fundamentals. Das Tutorial verspricht Ihnen, dass Sie nach dem Durcharbeiten in der Lage sind, jQuery Probleme selbstständig zu lösen. Dafür müssen Sie natürlich die Lektionen im Tutorial samt der Übungen gewissenhaft durchkauen.

JavaScript Basics

Sie beginnen mit Grundlagen von JavaScript, da jQuery eine Bibliothek von JavaScript ist. In dieser Rubrik werden Ihnen diese Grundlagen in ziemlich knapper und übersichtlicher Form mit Beispielen erklärt. Oben rechts finden Sie einen Editor. In jedem Beispiel gibt es oben ein Augenzeichen. Klicken Sie darauf, erscheint das Beispiel im obigen Editor und Sie können das Ergebnis des Code sehen.


Ein Code-Ausschnitt

Traversal and Manipulation Methods

In diesem Abschnitt werden Ihnen Funktionen vorgestellt, mit deren Hilfe Sie verschiedene Elemente in einer DOM-Struktur effektiv suchen und verändern können. Die Funktionen, welche dies gewährleisten nennt man traversale und manipulierende Funktionen.


Ein Code-Ausschnitt

Event Handler

Hier geht es mit Event Handlers weiter. Dabei handelt es sich um Mechanismen, die verschiedene Ereignisse, z.B. Mausklicks, erkennen. Nach der Erkennung ruft das Skript bestimmte Funktionen auf und führt diverse Aktionen als Antworten auf diese Ereignisse aus.


Event Handler: ein Code-Ausschnitt

Effects

In diesem Kapitel erfahren Sie einiges über Effekte, welche mit jQuery realisiert werden können.


Einführung in die Effekte: ein Code-Ausschnitt

Zudem finden Sie einige Workshop-Angebote rund um jQuery.

jQuery-Tutorial: Einführung und Grundlagen von Matthias Schütz

Ein weiteres jQuery-Tutorial für Anfänger kommt von Matthias Schütz. Das Tutorial ist deutschsprachig. Schütz gibt eine Einführung in die Welt von jQuery in Form eines Artikels. Weiter unten finden Sie zahlreiche hilfreiche Links zum Thema, sodass Ihr jQuery-Studium keinesfalls nur auf diesen Beitrag beschränkt ist.


Matthias Schütz gibt Ihnen eine kompakte jQuery-Einführung in deutscher Sprache

Links zu weiteren jQuery-Tutorials

Wer nun immer noch nicht genug hat, findet hier eine große Liste mit Tutorials und zahlreichen Tipps und Tricks zum Thema.


Eine grosse Sammlung von jQuery-Tutorials

(dpe)