Posts Tagged ‘CSS’
sprites are no new kids around the block. but they are still worth to mention because they are very efficient in decreasing the HTTP GETs.
e.g. instead of loading two images for two states of one button, just use one image and swap it with the sprites technique.
#crossfaderHandler { background: transparent url(../img/regler.png) 0 0 no-repeat; }
#crossfaderHandler:hover { background: transparent url(../img/regler.png) -70px 0 no-repeat; }
i decided to use the unit png fix for my transparent pngs (to make them work for < IE 7 users).
via css-tricks.com
instead of just setting the style values to zero (which than causes the work of adding single style values again) like the common reset css solutions (e.g. eric meyer or yahoo! developer) tripoli is doing more: afterwards it sets all the browsers to the same to display all elements the same.
I just read Paul Annett’s How to recreate Silverback’s parallax on vitamin.
The effect he describes is quite nice: see this page and resize your browser window. How does it work? 3 different layers with background images, these layers have different positions in % (-> related to window size) so resizing the browser window makes moving the pictures (each one in a different way).
My opinion: It looks good, but is kind of useless … maybe someone has a better idea of how to bring this effect to the users.
Read the rest of this entry »
Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.
Auch wenn es nicht wirklich nützlich ist – beeindruckend ist es schon!
Im Lifehacker Blog habe ich gerade folgenden Online Generator entdeckt:
Text + Image + CSS3 = Crazy Delicious
Was der macht? markiert einfach den folgenden Text und ihr werdet es sehen.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam venenatis. Nam
sodales, pede nec placerat ultrices, neq
ue nisl interdum neque, condimentum cond
imentum lacus libero non neque. Suspendi
sse feugiat venenatis tortor. Curabitur
sem. Nulla iaculis pharetra sem. Praesen
t eu pede a nunc hendrerit porttitor.Lor
em ipsum dolor sit amet, consectetuer ad
ipiscing elit. Nullam venenatis. Nam sod
ales, pede nec placerat ultrices, neque
nisl interdum neque, condimentum condime
ntum lacus libero non neque. Suspendisse
feugiat venenatis tortor. Curabitur sem
. Nulla iaculis pharetra sem. Praesent e
ich habe bewusst den text klein ehalten und die qualität ist dadurch nicht besser geworden, aber wer einmal selbst einen text und den linkzu einem bild in den generator eingibt, der wird sehen, dass das ergebnis schon dem bild ähnelt. Geht natürlich nicht im InternetExplorer, pseudo elemente werden nicht unterstützt.
Read the rest of this entry »
I just wrote Dennis Blöte’s website performance tuing where he linked to David Shea’s (yes, the “CSS Zen Garden guy”) A List Apartarticle article about sprites.
Reason enough to write a short blog entry about this smart way of using nice css hover effects.
Read the rest of this entry »
There are some issues which you should consider by creating a printversion of your homepage.
Following a summary of the most important changes to your stylesheet: Read the rest of this entry »
There is a possibility for automatic numerations in Hypertext documents. Even if it’s not really valid sometimes it is very usefull and neccesary: with the pseudo elements :before and :after you can for example realise numbered Headlines.
I took the code from selfhtml.org (by stefan muenz) and changed it for my case:
Read the rest of this entry »
Einfuehrungen:
Tutorials:
- Cutting and sewing grid-based design: Part 1, working with other people’s comps | urlgreyhot
- Grid-based design: Part 2, Designing blog theme templates | urlgreyhot
Erfahrungsberichte:
- Zeit für ein neues Layout : agenturblog.de
- Flexible vs. Fixed: Five simple steps to designing grid systems – Part 5 : Journal : Mark Boulton
- Subtraction: The Funniest Grid You Ever Saw
Podcasts:
Tools:
Frameworks:
Praesentationen:
Buecher:
- Amazon.com: Grid Systems in Graphic Design: Books: Josef Muller-Brockmann,Josef Muller – Brockmann
- Amazon.com: Making and Breaking the Grid: A Graphic Design Layout Workshop: Books: Timothy Samara
- Eher fuer Print: Verlag Hermann Schmidt Mainz – Verlagsverzeichnis | Grafikdesign | Praxishandbuch Gestaltungsraster
*to be continued*
ich habe ja auf www.dirk-wendling.de seit geraumer zeit eine “online visitenkarte” (microformats unter der haube). nun habe ich auf “24 ways to impress your friends” (ist so ein adventskalender für webmenschen, wie der von den webkrauts) folgenden artikel bemerkt: styling hcards with css. hört sich gut an und sieht sehr gut aus!
der nächste firefox wird wohl den acid test des web standards projekt bestehen.
der acid test ist quasi ein browser härtetest. er soll browserentwicklern helfen, ihren browser standardkonformer zu gestalten. ziel ist es, dass der smily wie in folgendem bild auch durch css erzeugt bzw richtig dargestellt werden kann.
