Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] CSS-Contest 2011 - WIPs

cebito

cebito

undefined

AW: [CSS] CSS-Contest 2011 - WIPs

hellemon schrieb:
Sodale, versuch wurde umgesetzt und zwar ohne Weißwürste und Biermösl Blosn :D

Mensch ihr solltet mal nach Bayern kommen, da dreht sich nicht alles um die Wurst. :p
Zum Vergrößern anklicken....

Weiß ich doch, und Bayern kenn ich nicht nur aus den Medien. Also i moags Design und a de Bazis :D

ach ja, bissi weiter gemacht -
 
Zuletzt bearbeitet:
H

Herr_D

offline

AW: [CSS] CSS-Contest 2011 - WIPs

Die Boxen hab ich gestern auch ausprobiert... wie machst du denn den Kulli?

Nicht schlecht... technisch gesehen Hammer... ;)
 
P

pretorianer

Noch nicht viel geschrieben

AW: [CSS] CSS-Contest 2011 - WIPs

@hellemon
:daumenhoch: echt schickes Layout.
Übrigens, zu cebitos Hinweis mit der Bühne könnt das neue Theatervorhang-Tutorial passen. Wäre sicherlich ein guter „Auffüller“ für die Seiten rechts und links.

@cebito
Die Hinweis-Navi gefällt mir gut
 
cebito

cebito

undefined

AW: [CSS] CSS-Contest 2011 - WIPs

Herr_D schrieb:
wie machst du denn den Kulli?
Zum Vergrößern anklicken....

3 Boxen... für die Ecken kannst mehrere Radien angeben, innen dann einen Verlauf. Allein die Positionierung ist in dem Fall schwierig, da der Drücker noch am h1 span hängt, der Rest an der h4 der Navi.

Code: 
/* Kugelschreibääär Drücker */
h1 span:after{content:'';background:#17B1CD;position:absolute;top:106px;top:125px\9;right:-20px;width:50px;height:20px;-moz-transform:rotate(355deg);-webkit-transform: rotate(355deg);-o-transform: rotate(355deg);background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#1B6CB7), to(#1B6CB7), color-stop(.1,#6EB6F9));background: -moz-linear-gradient(0% 0% 270deg, #1B6CB7, #6EB6F9 70%, #1B6CB7);
    -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -webkit-border-top-right-radius: 100px 5px;
    -webkit-border-bottom-right-radius: 100px 5px;
    -moz-border-radius-topright: 100px 5px;
    -moz-border-radius-bottomright: 100px 5px;
    border-top-right-radius:100px 5px;
    border-bottom-right-radius:100px 5px;
}

/* Kugelschreibääär Body */
#menue-one h4:before{content:'CSS3-Kugelschreibääär';text-align:right;font-family:Times,serif;font-size:.6em;font-weight:100;padding:6px 15px 0 0;color:#89B3DA;background:#17B1CD;position:absolute;top:306px;top:130px\9;right:750px;width:400px;height:24px;overflow:hidden;z-index:1;-moz-transform:rotate(343deg);-webkit-transform: rotate(343deg);-o-transform: rotate(343deg);background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#1B6CB7), to(#1B6CB7), color-stop(.1,#6EB6F9));background: -moz-linear-gradient(0% 0% 270deg, #1B6CB7, #6EB6F9 70%, #1B6CB7);text-shadow:-1px -1px 0px #1B6CB7,1px 0px 0px #6EB6F9;
    -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -webkit-border-top-right-radius: 100px 5px;
    -webkit-border-bottom-right-radius: 100px 5px;
    -webkit-border-top-left-radius: 100px 20px;
    -webkit-border-bottom-left-radius: 100px 20px;
    -moz-border-radius-topright: 100px 5px;
    -moz-border-radius-bottomright: 100px 5px;
    -moz-border-radius-topleft: 100px 20px;
    -moz-border-radius-bottomleft: 100px 20px;
    border-top-right-radius:100px 5px;
    border-bottom-right-radius:100px 5px;
    border-top-left-radius:100px 20px;
    border-bottom-left-radius:100px 20px;
}

/* Kugelschreibääär Clip */
#menue-one h4:after{content:'';background:#17B1CD;position:absolute;top:267px;top:124px\9;right:770px;width:150px;height:5px;-moz-transform:rotate(343deg);-webkit-transform: rotate(343deg);-o-transform: rotate(343deg);background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#1B6CB7), to(#1B6CB7), color-stop(.1,#6EB6F9));background: -moz-linear-gradient(0% 0% 270deg, #1B6CB7, #6EB6F9 70%, #1B6CB7);
    -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15) inset,1px 6px 20px rgba(0, 0, 0, 0.6);
    -webkit-border-top-right-radius: 100px 5px;
    -moz-border-radius-topright: 100px 5px;
    border-top-right-radius:100px 5px;
    -webkit-border-top-left-radius: 100px 5px;
    -webkit-border-bottom-left-radius: 100px 5px;
    -moz-border-radius-topleft: 100px 5px;
    -moz-border-radius-bottomleft: 100px 5px;
    border-top-left-radius:100px 5px;
    border-bottom-left-radius:100px 5px;
}
 
hellemon

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

cebito schrieb:
Weiß ich doch, und Bayern kenn ich nicht nur aus den Medien. Also i moags Design und a de Bazis :D

ach ja, bissi weiter gemacht -
Zum Vergrößern anklicken....

@cebito, wirklich der Hammer was mit CSS3 schon alles möglich ist, danke fürs zeigen - Tolle Arbeit und natürlich freut es mich das du die Bazis moagst. :D

pretorianer schrieb:
@hellemon
:daumenhoch: echt schickes Layout.
Zum Vergrößern anklicken....

Hab Dank

@une_art, freut mich wenn es dir gefällt, bist dann herzlich eingeladen wenn das Lokal öffnet. :D
@adi du bekommst dann bei der Neueröffnung auch deine Weißwürste mit Brezn und einen kühlen Weißbier. :D Aber bitte das ganze vor 12:00 Uhr Mittag. ;-)
 
Zuletzt bearbeitet:
lauffreak

lauffreak

FotoAnfänger

AW: [CSS] CSS-Contest 2011 - WIPs

hallo,
oh je- ich habe mich auch hier angemeldet, mit dem Ziel css zu lernen. Bei euch komme ich nicht mit- ihr könnt es schon. Aber ich habe ja noch 2 wochen Zeit ... noch habe ich nicht aufgegeben.
Meine Frage: Wie bekomme ich ein Bild vor die Überschrift?
Hier mein Code:
#content-one h2 { background-color: blue;
background: -moz-linear-gradient(100% 100% 90deg, #000044, #0066FF) url('images/Gaensebl.png');
padding: 5px 5px 5px 45px;
color: white;
---
so ist alles blau- das ist aber nur für den IE.
ich wollte den Gradienten anwenden und eine Blume an den start setzen..
Kann mir jemand helfen?

--verzweifelt --- lauffreak
 
MegaAdi

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

@ Cebito: Das ist einfach nur genial! Du bist ein GENIE!!

@ helle: Weißwurstfrühshoppen fetzt *fg* ach ja.. ich kenn bayern auch ned nur aus den Medien... war in Pfreimd / Oberpfalz Stationiert und hab ne ganze Zeitlang im Landkreis ED gewohnt =P

@ lauffreak: Ich denke :before ist das was du suchst oder? Hier bei dem Contest geht es nicht darum zu zeigen wer CSS kann und wer nicht sondern der Lernfaktor steht hier auf N°1! So sehe ich das zumindest. Deswegen bin ich froh dass Leute wie Cebito zeigen was möglich ist mit reinem CSS!!

Grüße Adi
 
cebito

cebito

undefined

AW: [CSS] CSS-Contest 2011 - WIPs

Gradient und Hintergrundbild funktionieren nicht zusammen, du kannst das Bild aber davor einsetzen:

Code: 
#content-one h2 { 
background-color: blue; 
background: -moz-linear-gradient(100% 100% 90deg, #000044, #0066FF);
}
#content-one h2:before{
content: url('images/Gaensebl.png');
}
Noch die passenden Abstände und du hast dein Plümschen drin ;)
 
svhresi

svhresi

muss-viel-lernen

Kreativ-Flatrate-User
AW: [CSS] CSS-Contest 2011 - WIPs

wenn ich das hier alles so sehe, dann komm ich mir ein kleines Licht vor ;-)
alleine diese CSS3 Styles hauen mich vom Hocker, ich glaub damit muss ich mal näher mit beschäftigen.

@cebito einzig der Font gefällt mir nicht, ansonsten der Wahnsinn ;-)
 
cebito

cebito

undefined

AW: [CSS] CSS-Contest 2011 - WIPs

Bin grad mal den Thread durchgegangen, ist ja schon einiges zusammengekommen, immerhin schon 17!!! mehr oder weniger fertige Designs. Muss ich mal sagen, bin stolz auf Euch!
Damit ihr den Überblick nicht verliert hab ich mal die ganzen Links zu den WiP's in den Eingangspost gesammelt...

svhresi schrieb:
@cebito einzig der Font gefällt mir nicht, ansonsten der Wahnsinn ;-)
Zum Vergrößern anklicken....

Das ist D seine Sauklaue, hat der mir so zugeschickt ;)
 
Zuletzt bearbeitet:
U

une_art

Wissenssauger WS2100

AW: [CSS] CSS-Contest 2011 - WIPs

@cebito: Danke fürs Sammeln ;-) Was du da alles mit reinem CSS3 fabrizierst ist echt der Wahnsinn! Davon in ich noch meilenweit entfernt. Respekt! Bin echt aufs Endergebnis gespannt.
Eine andere Schriftart würde das ganze meiner Meinung nach aber auch noch aufwerten :p
 
cebito

cebito

undefined

AW: [CSS] CSS-Contest 2011 - WIPs

Ich sags mal mit Helles Worten - ich hab Blut geleckt ;) und ich hab Spaß dabei. Oder anders, ich hab angefangen, und wo schon mal ne Begrenzung, hab ich mir gedacht, da versuchen wir's mal ganz ohne Grafik.

Bisher hab ich mich ja auch den ganzen -webkit-, -moz-, -o- -Geschichten immer verweigert - was soll das, könnten ja wirklich mal einheitlich reagieren, im Endeffekt sind die Deklarationen dahinter ja gleich. Hat mich bis jetzt immer genervt und macht es auch weiterhin. Alle schimpfen immer auf den IE, aber wenn man wirklich was machen will beschert jeder Browser zusätzliche Arbeit.

Inspiration war und ist sicherlich auch das Da wurden aber ne halbe Millionen Divs verbaut. Die hat man hier freilich nicht. Nicht so, das ich "before" oder "after" vorher nicht kannte, aber die Variante(n) kamen mir auch erst durch diesen in den Sinn

Um hier Einigen die Angst zu nehmen - mein Beitrag ist lediglich meine Spielwiese, keinesfalls perfekter Anschauungsunterricht (dennoch zum Kieken empfohlen :D )
 
MegaAdi

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

Lueh schrieb:
ach ja, und D's letzter Versuch :D
muelltonne.png
Zum Vergrößern anklicken....

:DD sehr schick rangetackert *fg*
@ Cebito: Ich denke dein WIP wird Wegweiser in Richtung CSS3 sein und dahingehen Maßstäbe setzen! Weil das ist einfach nur der Wahnsinn was du da machst... Schriftart hin oder her... das is nich das technische Problem dahinter.. aber der Rest... einfach nur genial! Und danke fürs Sammeln der WIPS!

@ svhresi: wenn du dich auch nur n bischen damit beschäftigst und von dem Contest lernst ist schon die Aufgabe und der Sinn des Contests gelungen! Denn dass ist in meinen Augen das wichtigste hier.

@ D: Zeich uns ma deine SauKlaue *fg*

Grüße Adi
 
hellemon

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

Auch ich sag danke @cebito fürs Sammeln, es ist eine Menge zusammen gekommen. :D Hier habe ich noch ein paar guten Links bezüglich CSS3 Logos und Techniken.




Und hier ein paar Links zur Vorbereitung für den Contest

Übersicht aller CSS-Eigenschaften – Index von Jens O. Meiert
CSS current work & how to participate
CSS Typography - Examples for CSS and Web Typography


The StyleWorks { Herzlich Willkommen }

Und natürlich die beiden Bücher die ich mir für den Contest gekauft habe. ;)





Gruß Helle
 
Zuletzt bearbeitet:
E

Eliteplayer

Talentfrei=/Wille ist da!

AW: [CSS] CSS-Contest 2011 - WIPs

Hallo Leute,
ich mache nicht mit - mir fehlt die Zeit, aber was ich hier gesehen habe => genial! Ich habe mir alle WIPs gespeichert und versucht einige Sachen raus zu kopieren, um die Sachen zu verstehen! Ich schaue mir alle Links an die gepostet werden, um zu sehen wie ihr es gemacht hab => Helle: alle Links gespeichert! ;)

CSS Pur gibt's auch bei Google Books:
CSS pur!: Ultimative Weblösungen mit ... - Google Bücher

Vielen Dank für eure Arbeit - durch die kann man sooo viel lernen :)
 
jackykfm

jackykfm

ne pas se fouler

AW: [CSS] CSS-Contest 2011 - WIPs

Helle und alle Interessierten, noch ein Link, ein komplettes Haus in CSS erstellt
.
interessant!

jacky
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 216 (Mitglieder: 5, Gäste: 211)
Robots: 695

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben