PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
WIP und Entwürfe zu Webseiten
WIP - Webshowroom simonpicos
Beitrag
<blockquote data-quote="simonpicos" data-source="post: 1879234" data-attributes="member: 501490"><p>Hallo zusammen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p>Ich möchte hiermit mal etwas Neues starten:</p><p>Im 2D-Bereich gibt es ja schon lange Showrooms einzelner User, in denen sie ihre Werke präsentieren. </p><p></p><p>Hiermit eröffne ich den ersten <span style="font-size: 18px"><span style="color: Orange">Webshowroom</span></span></p><p></p><p>In diesem möchte ich euch meine Projekte präsentieren und natürlich Kritik sammeln, damit ich ,mich weiter verbessern kann <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /> </p><p></p><p>Den Anfang machen eine Sammlung von Buttons (die ich schon präsentiert habe) und eine kleine Bildergalerie, die komplett ohne Javascript auskommt.</p><p></p><p>Zu Beiden wird es (sobald ich Ferien habe <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /> ) Auch Tutorials geben!!</p><p></p><p></p><p></p><p><strong><span style="font-size: 12px">CSS3 Slideshow v4</span></strong></p><p></p><p><a href="http://imgur.com/FbcrZ" target="_blank"><img src="http://i.imgur.com/FbcrZ.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p><span style="font-size: 18px"><strong>CSS3 - Bildergalerie</strong></span></p><p></p><p><a href="http://show.simonpicos.hostingsociety.com/css3-gallery/" target="_blank"><img src="http://www.abload.de/img/previewifzyt.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p>Link: Aufs Bild klicken <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p></p><p></p><p></p><p></p><p><span style="font-size: 18px"><strong>CSS3 - Buttons</strong></span></p><p></p><p><a href="http://show.simonpicos.hostingsociety.com/css3-buttons/" target="_blank"><img src="http://www.abload.de/img/previewawb79.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a> </p><p>Link: Aufs Bild klicken <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>→Hierbei brauche ich gleich eure Hilfe: Die "Transforms" funktionieren in den Webkitbrowsern(Safari, Chrome) nicht. Und ja: ich habe dort nicht das jeweilige "-webkit-prefix", aber ich nutze , sodass diese nicht nötig sind..</p><p></p><p></p><p></p><p><span style="font-size: 18px"><strong>Animierter Tooltip mit CSS3</strong></span></p><p></p><p><span style="color: DimGray">(Ich weiß, die rechtsbündige Schrift im Aufklapplink sieht etwas komisch aus mit der linksbündigen im Inhalt.. Mal sehn, ich lass mir was einfallen)</span></p><p></p><p><a href="http://simonpicos.hostingsociety.com/labs/showhide/version2/index.html" target="_blank"><img src="http://www.abload.de/img/previewmxrhr.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a> </p><p><strong>--> Hierzu wird es auch bald mein erstes Tutorial geben!</strong></p><p></p><p></p><p></p><p></p><p></p><p><strong><span style="font-size: 18px">Es gibt was neues!</span></strong></p><p></p><p>Diesmal nur was kleines:Ne Möglichkeit auf die verschiedenen social Networks zu verlinken. (bspw. auf einer Portfoliosite).</p><p></p><p>Schaut euchvor allem mal die von mir im Footer verlinkte Quelle der Icons an. Find ich extrem praktisch <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p><a href="http://html5css3demos.bplaced.net/nav-rotatecircles/index.html#" target="_blank"><img src="http://www.abload.de/img/previewmaybu.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p></p><p><span style="font-size: 18px"><strong>CSS3 Animation-timing-functions</strong></span></p><p></p><p>kleine Spielerei <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile :-)" loading="lazy" data-shortname=":-)" /></p><p></p><p><a href="http://dabblet.com/result/gist/1664093" target="_blank"><img src="http://www.abload.de/img/2012-01-23_18370828ovs.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a> </p><p></p><p>Code: <a href="http://dabblet.com/gist/1664093" target="_blank">http://dabblet.com/gist/1664093</a></p><p></p><p></p><p>.</p><p></p><p></p><p><span style="font-size: 18px"><strong>CSS3 Button mit 3D-Effekt</strong></span></p><p></p><p>Mal wieder was kleines Neues <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile :-)" loading="lazy" data-shortname=":-)" /> Und zwar...</p><p></p><p></p><p>...ein Button!! <img src="/styles/default/xenforo/smilies/biggrin.gif" class="smilie" loading="lazy" alt=":D" title="Big Grin :D" data-shortname=":D" /></p><p></p><p>Mit netten 3D-Effekt <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p><a href="http://html5css3demos.bplaced.net/css3-buttons/pushbutton/index.html#" target="_blank"><img src="http://www.abload.de/img/2012-01-29_193958yfqv3.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p></p><p></p><p><strong><span style="font-size: 18px">CSS3 Breadcrumbs</span></strong></p><p></p><p>Ich hatte das Ding ja bereits mit einigen Problemen hier kurz gezeigt, habe diese aber beseitigt und stelle nun die finale Version vor (natürlich sind verbesserungsvorschläge immer gern gesehn <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /> )</p><p></p><p>Keine große Sache, hab nur ein wenig mit CSS-Pseudoelementen und Dreicken rumgespielt; Eine CSS-breadcrumbs-navigation</p><p></p><p><a href="http://html5css3demos.bplaced.net/css3-breadcrumbs/" target="_blank"><img src="http://www.abload.de/img/2012-02-08_215814u7qv2.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a> </p><p></p><p></p><p></p><p><strong><span style="font-size: 18px">CSS-Contest</span></strong></p><p>Einige haben es ja sicher mitbekommen, die letzten paar Wochen lief hier der CSS-Contest ab. Sind echt tolle Ergebnisse bei rausgekommen. Ich würde euch bitten hier zu gehen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p>Und so sieht mein Design aus: </p><p></p><p><a href="http://css-contest.bplaced.net/2012/index.php?design=simpleDark&menu=2" target="_blank"><img src="http://i.imgur.com/5QrVG.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p></p><p></p><p></p><p><strong><span style="font-size: 18px">Start/Stop Animation</span></strong></p><p></p><p><a href="http://html5css3demos.bplaced.net/css3-startstop-animation/" target="_blank"><img src="http://i.imgur.com/OygTd.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p>Will zeigen, dass man auch mit CSS einfache Animationen oder ähnliches per klick starten kann. Und das, ohne dass im browser ein step zur history hinzugefügt wird (wie per :target)</p><p>Werde diese Technik demnächst auch mal in meine Slideshows einbauen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p></p><p><strong><span style="font-size: 18px">Animated Skill Bar</span></strong></p><p></p><p>Das ganze habe ich jetzt weiterentwickelt zu einer dynamischen anzeige "meiner" Skills <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>Sieht mittlerweile sogar nach was aus, wie ich finde <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p><a href="http://html5css3demos.bplaced.net/css3-animated-skills/" target="_blank"><img src="http://i.imgur.com/JLj56.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p></p><p></p><p></p><p><strong><span style="font-size: 18px">CSS3 Pricing Tables</span></strong></p><p><a href="http://html5css3demos.bplaced.net/css3-pricing-tables/" target="_blank"><img src="http://i.imgur.com/g3QBc.png" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a></p><p></p><p></p><p></p><p></p><p></p><p></p><p><strong><span style="color: Red">Ich freue mich über Kritik und Anregungen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></span></strong></p><p></p><p></p><p>Lieben Gruß</p><p>Simon</p></blockquote><p></p>
[QUOTE="simonpicos, post: 1879234, member: 501490"] Hallo zusammen :) Ich möchte hiermit mal etwas Neues starten: Im 2D-Bereich gibt es ja schon lange Showrooms einzelner User, in denen sie ihre Werke präsentieren. Hiermit eröffne ich den ersten [SIZE=5][COLOR=Orange]Webshowroom[/COLOR][/SIZE] In diesem möchte ich euch meine Projekte präsentieren und natürlich Kritik sammeln, damit ich ,mich weiter verbessern kann :) Den Anfang machen eine Sammlung von Buttons (die ich schon präsentiert habe) und eine kleine Bildergalerie, die komplett ohne Javascript auskommt. Zu Beiden wird es (sobald ich Ferien habe ;) ) Auch Tutorials geben!! [B][SIZE="3"]CSS3 Slideshow v4[/SIZE][/B] [URL=http://imgur.com/FbcrZ][IMG]http://i.imgur.com/FbcrZ.jpg[/IMG][/URL] [SIZE=5][B]CSS3 - Bildergalerie[/B][/SIZE] [URL="http://show.simonpicos.hostingsociety.com/css3-gallery/"][IMG]http://www.abload.de/img/previewifzyt.jpg[/IMG][/URL] Link: Aufs Bild klicken ;) [SIZE=5][B]CSS3 - Buttons[/B][/SIZE] [URL="http://show.simonpicos.hostingsociety.com/css3-buttons/"][IMG]http://www.abload.de/img/previewawb79.jpg[/IMG][/URL] Link: Aufs Bild klicken ;) →Hierbei brauche ich gleich eure Hilfe: Die "Transforms" funktionieren in den Webkitbrowsern(Safari, Chrome) nicht. Und ja: ich habe dort nicht das jeweilige "-webkit-prefix", aber ich nutze , sodass diese nicht nötig sind.. [SIZE=5][B]Animierter Tooltip mit CSS3[/B][/SIZE] [COLOR=DimGray](Ich weiß, die rechtsbündige Schrift im Aufklapplink sieht etwas komisch aus mit der linksbündigen im Inhalt.. Mal sehn, ich lass mir was einfallen)[/COLOR] [URL="http://simonpicos.hostingsociety.com/labs/showhide/version2/index.html"][IMG]http://www.abload.de/img/previewmxrhr.jpg[/IMG][/URL] [B]--> Hierzu wird es auch bald mein erstes Tutorial geben![/B] [B][SIZE=5]Es gibt was neues![/SIZE][/B] Diesmal nur was kleines:Ne Möglichkeit auf die verschiedenen social Networks zu verlinken. (bspw. auf einer Portfoliosite). Schaut euchvor allem mal die von mir im Footer verlinkte Quelle der Icons an. Find ich extrem praktisch :) [url=http://html5css3demos.bplaced.net/nav-rotatecircles/index.html#][img]http://www.abload.de/img/previewmaybu.jpg[/img][/url] [SIZE="5"][B]CSS3 Animation-timing-functions[/B][/SIZE] kleine Spielerei :-) [url=http://dabblet.com/result/gist/1664093][img]http://www.abload.de/img/2012-01-23_18370828ovs.jpg[/img][/url] Code: [url]http://dabblet.com/gist/1664093[/url] . [SIZE="5"][B]CSS3 Button mit 3D-Effekt[/B][/SIZE] Mal wieder was kleines Neues :-) Und zwar... ...ein Button!! :D Mit netten 3D-Effekt :) [url=http://html5css3demos.bplaced.net/css3-buttons/pushbutton/index.html#][img]http://www.abload.de/img/2012-01-29_193958yfqv3.jpg[/img][/url] [B][SIZE="5"]CSS3 Breadcrumbs[/SIZE][/B] Ich hatte das Ding ja bereits mit einigen Problemen hier kurz gezeigt, habe diese aber beseitigt und stelle nun die finale Version vor (natürlich sind verbesserungsvorschläge immer gern gesehn ;) ) Keine große Sache, hab nur ein wenig mit CSS-Pseudoelementen und Dreicken rumgespielt; Eine CSS-breadcrumbs-navigation [url=http://html5css3demos.bplaced.net/css3-breadcrumbs/][img]http://www.abload.de/img/2012-02-08_215814u7qv2.jpg[/img][/url] [B][SIZE="5"]CSS-Contest[/SIZE][/B] Einige haben es ja sicher mitbekommen, die letzten paar Wochen lief hier der CSS-Contest ab. Sind echt tolle Ergebnisse bei rausgekommen. Ich würde euch bitten hier [SIZE="6"][B][COLOR="SeaGreen"][/COLOR][/B][/SIZE] zu gehen :) Und so sieht mein Design aus: [URL="http://css-contest.bplaced.net/2012/index.php?design=simpleDark&menu=2"][IMG]http://i.imgur.com/5QrVG.jpg[/IMG][/URL] [B][SIZE="5"]Start/Stop Animation[/SIZE][/B] [URL=http://html5css3demos.bplaced.net/css3-startstop-animation/][IMG]http://i.imgur.com/OygTd.jpg[/IMG][/URL] Will zeigen, dass man auch mit CSS einfache Animationen oder ähnliches per klick starten kann. Und das, ohne dass im browser ein step zur history hinzugefügt wird (wie per :target) Werde diese Technik demnächst auch mal in meine Slideshows einbauen :) [B][SIZE="5"]Animated Skill Bar[/SIZE][/B] Das ganze habe ich jetzt weiterentwickelt zu einer dynamischen anzeige "meiner" Skills ;) Sieht mittlerweile sogar nach was aus, wie ich finde :) [URL=http://html5css3demos.bplaced.net/css3-animated-skills/][IMG]http://i.imgur.com/JLj56.jpg[/IMG][/URL] [B][SIZE="5"]CSS3 Pricing Tables[/SIZE][/B] [URL=http://html5css3demos.bplaced.net/css3-pricing-tables/][IMG]http://i.imgur.com/g3QBc.png[/IMG][/URL] [B][COLOR="Red"]Ich freue mich über Kritik und Anregungen :)[/COLOR][/B] Lieben Gruß Simon [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
WIP und Entwürfe zu Webseiten
WIP - Webshowroom simonpicos
Oben