22 tutoriales sobre CSS

publicado por Marco | viernes, octubre 26, 2007 | , , | 2 comentarios »

Esta lista fue hecha por marcofolio.net y esta realmente buena. ademas de presentar otras herramientas para comprobar tus hojas de estilo CSS.

  • Herramienta para ver los CSS desde distintos navegadores y plataformas
  • El servicio de validacion de la W3
  • La última herramienta para reducir el tamaño de tu hoja de estilos.


  • Creación de menú con pestañas - dezinerfolio.com
    Creating Liquid CSS Tabs for Menus
    CSS Tabs based menu systems are really improving instead of all the classic button based navigation. This small tutorial will help you create a image based liquid tab using CSS and xHTML.


  • Crear un mensaje de alerta - bioneural.net
    Create a valid CSS alert message
    In various places around the net you may have seen alert boxes. Here's a tutorial on how to create such an alert message that is CSS valid.


  • Esquinas flotantes con CSS - marcofolio.net
    Create valid CSS floating corners
    Many websites have eye-catching CSS floating corners. These can be used for many purposes, such as advertations. If you're viewing this page, you'll see one floating corner in your browser. Even when you resize your browser, the corner will stick to his position.


  • Superposició de pestañas - shapeshed.com
    Overlapping CSS Tabs
    Overlapping navigation is a real problem in CSS with the box model and browser support. It is possible though. This technique is advanced CSS and the tutorial assumes a good level of understanding of both CSS and XTHML.


  • Sistema de clasificación por estrellas - pmob.co.uk
    CSS Star Rating System
    Simple CSS Star Rating System. No JavaScript required.


  • Crear un cuadro de lista - hedgerwow.com
    Making ListBox with CSS
    A tutorial on created advanced listboxes with CSS. Also works with images.


  • Desvanecimiento de fondo - css-tricks.com
    Fade Out Bottom
    This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.


  • Cuadros para comentarios - willmayo.com
    CSS Speech Bubbles
    Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. Tested in all major browsers.


  • Hoverbox Galeria de imágenes - sonspring.com
    Hoverbox Image Gallery
    Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS...


  • Grafico de barras - applestooranges.com
    CSS For Bar Graphs
    This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.


  • Más bordes redondeados con CSS - schillmania.com
    Even More Rounded Corners With CSS
    Yep, it's another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.


  • Area de texto con estilo - css-tricks.com
    Styled Text Area
    A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS, just like any other element.


  • Crear Sombras - alistapart.com
    CSS Drop Shadows
    They’re the corkscrew in every graphic designer’s Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends — and static images with a fixed background effect are not very adaptable.


  • Creación de un mapa del sition - zabdesign.de
    Sitemap Celebration
    Creating a sitemap for your website can be very useful. Use nested lists to create a nice sitemap. Tested and works fine on most browsers.


  • Combinando imagenes - magnetiq.co
    Using Less Images
    Image rollovers are usually composed of two individual images; one for the default state and one for when the mouse is hovered over the image or link. However, it bears some advantages to use a single image by taking advantage of CSS image offsets.


  • Estilos CSS para controles de formularios - 456bereastreet.com
    Styling form controls with CSS, revisited
    A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.


  • Estilos de tabla - veerle.duoh.com
    A CSS styled table version 2
    The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.


  • Botones atractivos con CSS - oscaralexander.com
    How to make sexy buttons with CSS
    This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.


  • Iconos en los enlaces de texto - pooliestudios.com
    Iconize Textlinks with CSS
    Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by its icon. The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.


  • Vinculos Remotos - css-tricks.com
    Remote Linking
    Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.


  • Tutorial sobre elementos flotantes - css.maxdesign.com.au
    Floatutorial
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.


  • Simples comillas - webdesignerwall.com
    Simple Double Quotes
    This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.


  • Menu horizontal - cssplay.co.uk
    Professional horizontal CSS Menus
    Download some really cool professional looking horizontal menus. View the source to learn how to create these menus on your own.



2 comentarios

  1. Maria Cristina // 12:35 p.m.  

    Hello im sorry, pa que me entendas hola y lo siento mucho, de veras que no estabas en mis angeles inspiradores pero ahora si lo estas y no porque me sienta en la obligacion porque tel o haz ganado por se un fiel seguirdor de mis post, y pues yo tambien me lo meresco porque soy la fiel que te comenta porque mas que no entienda ni la j de lo que dices jajjaja
    saludos y no te parece super que este nublado ya era demasiada la calor

  2. Anónimo // 8:58 p.m.  

    Brand new mobile phone , laptop , come with complete

    accessories with one year international warranty.

    Emaill address: camr_inc@hotmail.com


    BlackBerry Storm 9500.....$300usd
    BlackBerry Curve 8900 ...$250usd
    Nokia 8800 Carbon Arte..$600usd
    HTC Touch HD ..........$500usd
    HTC Touch Pro ..........$400usd
    HTC Touch Diamond ...$350usd
    Samsung omnia i900.....$400usd
    Apple iphone 3G 16gb........$300usd
    Sony ericsson C905.........$500usd
    Nokia n96 16gb...$400usd
    Apple iphone 16gb..$350usd
    Sony ericsson xperia x1..$400usd
    Apple iphone 8gb.....$300usd
    Nokia n95 8gb.......$300usd
    Ps3 60gb.............$300usda


    PACKAGE CONTENT Nokia 8800 Carbon Arte.

    Nokia 8800 Carbon Arte Quadband 3G 4GB UMTS Mobile Phone
    BH-803 Bluetooth Headset
    Standard battery, Li-Ion 1000 mAh (BL-4U)
    Carrying Case
    Data CD-ROM
    Device Handsfree
    Desktop Charger
    Travel Charger
    User Manual
    Bluetooth Headset


    Sidekick 2008 (Gekko)
    Included Accessories
    512 mb MicroSD card
    Battery
    Charger
    Stereo Hands-Free Headset
    Mini-USB cable
    Changeable Shells (black & Green Included)


    We make shipment via Ups and Fedex shipping company 2days

    deliver worldwide.
    If you are interested in buying our product contact us via

    Email address: camr_inc@hotmail.com