background preloader

CSS Buttons with Pseudo-elements

CSS Buttons with Pseudo-elements
In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. View demo Download source Hola, amigos. In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. The font used is ‘Open Sans’ by Steve Matteson. Disclaimer:I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files. I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Markup The structure of all these buttons needs just one anchor tag for it to work, since we will be creating the other elements with the ::before pseudo-class. Example 1 I think this is the easiest one, with a very regular CSS. First of all, we will give the general style of the button, including its active state. Then, we create the gray container using the ::before pseudo-element. Example 2 Related:  Web Development

Fluid CSS3 Slideshow with Parallax Effect In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%.

HTML EMAIL BOILERPLATE v 0.5 updated 11/5 CSS3 Lightbox Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos

Crear menus de navegación en CSS usando listas Para completar este tutorial es recomendable leer antes el Tutorial Básico de CSS ¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS. Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la unica diferencia es que las ordenadas añaden un número correlativo a cada item de la lista, mientras que las desordenadas no: Las Listas Ordenadas: <ol><li>item</li><li>item</li><li>item</li></ol> Nos da como resultado: item item item Mientras que, las listas desordenadas: <ul> <li>item</li> <li>item</li> <li>item</li></ul> Nos queda: item item item Ahora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú? En el CSS:

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit. Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ? Les propriétés CSS3 utilisées ici sont les suivantes : border-radius pour les bords arrondisbox-shadow pour les ombres des blocscontent pour rajouter du contenu au HTMLgradient pour les dégradés des blocsrgba pour avoir des fonds transparentstext-shadow pour les ombres du texte J’utilise aussi les pseudo-classes CSS3 suivantes : :after pour rajouter du texte HTML à la suite d’un élément:last-child pour sélectionner le dernier enfant d’un élément:target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML. Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).

Workshop / Chrome Experiments Unfortunately, either your web browser or your graphics card doesn't support WebGL. We recommend you try it again with Google Chrome. Experimental CSS3 Animations for Image Transitions Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only. View demo Download source Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by. The images used in the demo are by Joanna Kustra. Please note that the 3D effects will only work in Webkit browsers. How it works Given a set of images, we’ll add the first image to the wrapper with the class te-cover. The main idea is to always show the regarding image using te-cover. Demos Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image. We hope you like our little experiment and find it inspiring and useful!

A List Apart: Articles: Drop-Down Menus, Horizontal Style Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Next step is the sub-menus. Now the fun bit.