background preloader

Using CSS Text-Shadow to Create Cool Text Effects

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects! Check out the six text effects of vintage/retro, inset, anaglyphic, fire and board game in the demo, then copy the code snippets below to use the effects in your own designs. Needless to say you’ll need a text-shadow supporting browser (Safari, Chrome, Firefox) to see them in all their glory. View the demo The text shadow CSS property is used to add shading to any text related HTML element. text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; How it works: View the demo The neon text effect is made up of 8 levels of shading. View the demo text-shadow: 0px 2px 3px #666;

Spritebox - Create CSS from Sprite Images 8 Useful CSS Tools Writing better CSS is something all web designers and developers should strive for, and thankfully there are some useful tools out there to help do just that. For this post, we’ve rounded up a collection of new tools to help you with your CSS. From learning new CSS3 properties, to making your code more efficient, there’s bound to be a few tools here you will find useful. CSS3 Patterns Gallery CSS3 Patterns Gallery lets you browse various CSS3 patterns as thumbnails or fullscreen and grab the code so you can use them on your own site. PrefixMyCSS PrefixMyCSS helps you save time by letting you write your properties one way. Layer Styles Layer Styles is a HTML5 app for creating CSS3 in a intuitive way. Sencha Animator Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. The Web Font Combinator The Web Font Combinator was created in order to preview web font combinations. CSS Pivot CSS Lint CSS Prism

50 New Useful CSS Techniques, Tutorials and Tools Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. CSS3 Media QueriesCSS2 allows you to specify stylesheet for specific media type such as screen or print.

Going Nuts with CSS Transitions I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. Laying the foundations First we are going to make our images look like mini polaroids with captions. Here’s the markup: <div class="polaroid pull-right"><img src=".. You’ll notice we’re using a somewhat presentational class of pull-right here. The actual polaroid effect itself is simply applied using padding, a border and a background colour. The box-shadow property takes four values: three lengths and a colour. The colour value can be given in any format recognised by CSS. Rotation For browsers that understand it (currently our old favourites WebKit and FF3.5+) we can add some visual flair by rotating the image, using the transform CSS 3 property. -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg); transform: rotate(9deg); Rotations can be specified in degrees, radians (rads) or grads). Animation Let’s go nuts. Here’s our new markup: Throwing polaroids at a table

20 Best Websites to Learn and Master CSS CSS (Cascading Style Sheets ) is a simple design language intended to simplify the process of making web pages presentable. It is the most common application in styling web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL, as defined. It handles the look and design of web pages. Using CSS, you can control the color of the text, style fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. This next article is about 20 Best Websites to Learn and Master CSS. Csstutorial This website is all about CSS, a key tool in web design. cssbasics In this website, you will learn the separation of style from content, and discover all the basics of CSS design.Visit Site w3schools In this CSS website you will learn how to use CSS to control the style and layout of multiple Web pages all at once.Visit Site htmlgoodies cssdog htmldog csseasy

Using The Best Ampersand Available I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits: Now that's a nice looking ampersand. Then apply styling to the class. Check out some simple examples of how this can make text more pleasing: I should mention that the excellent wp-typogrify plugin automatically adds this span/class to ampersands on your WordPress blog, which is pretty slick and just one of it's many nice features. Share On

CSS Tutorials In this article you will get access to one of the largest collections ever of CSS Tools, Tutorials, Cheat Sheets etc. It builds on previous CSS posts in tripwire magazine with the purpose of creating a one stop fit all CSS resource. Several new resources have been added. Please comment if you know a great CSS resource that didn’t make it on the list and I will add it ASAP. Advertisement Index CSS getting started and reference resources CSS Basics Large getting started guide with everything you ever wanted to know about the basics of CSS Creating a CSS layout from scratch This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. Webdesignfromscratch, CSS Introduces most elements of we b development, including css. 10 Principles of the CSS Masters This is really essential tips from true css experts. CSS Specificity: Things You Should Know Solving 5 Common CSS Headaches CSS is a relatively simple language to learn. Sure, anyone can write CSS.

Code a Responsive Navigation Menu Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design. Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects. What We’re Building If you’re the kind of person who likes to skip ahead, here’s a sneak peek at what we’re building. Demo: Click here to see and tweak it on Dabblet. The HTML Let’s jump right into this project without a bunch of unnecessary fluff. The first step is to decide on some markup. Believe it or not, this one little piece of code had my head spinning when it came time to test. Fortunately, the fix is easy, just drop in the famous html5shiv and you’re good to go (place this in the head portion of your document). Add the List Add The Sub Tag Progress Check Starter Styles Container Styles Border Fix

css Plus de 44.000 téléchargements pour le thème wordpress Codium Extend September 28, 2011 – 2:03 pm Après avoir fait un petit tour sur le codex de wordpress, je viens de constater que mon thème Codium Extend avait été téléchargé plus de 44.000 fois, ce qui est un très bon résultat pour un thème simple et minimaliste, la citation sur Smashing Magazine a du aider. Pour fêter cela j’ai fait une grosse read more Télécharger les nouvelles icônes de Lion le nouvel OS d’Apple August 21, 2011 – 9:53 am En juillet, Apple a déployé (contre quelques euros) sa nouvelle version de son OS pour mac, cette dernière s’appelle Lion et vient en remplacement de Snow Leopard. Convertir des couleurs hexadécimales en rgba Voici un petit outil pratique si vous vous êtes mis au CSS3, ce dernier va vous permettre de convertir une couleur hexadécimale (comme #2491CF) en couleur rgba (comme rgba(36, 145, 207, 0.7)). Viewport et les Media Queries pour les nuls! March 28, 2011 – 10:38 pm Les couleurs du web

Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree. Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Et enfin, les propriétés de transition et d'animation sont plutôt bien supportées par l'ensemble des navigateurs modernes, y compris à partir d'Internet Explorer 10. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Quelques Références Transitions:

Related: