Musings on the Relationship Between Grids and Guides Though it has been around for years in print design, the concept of working on the grid has become really popular in web design in recent times, especially with the success and availability of CSS frameworks like the 960 Grid System. Many tutorials and articles that I have seen make explicit use if grids, even going so far as to specifically recommend the use of one particular system. Musings on the Relationship Between Grids and Guides That’s great. Personally, I’ve been used the 960 Grid System in several designs, and will be using some form of grid in the upcoming redesign of this very blog. As great as grids are, however, I do think that it’s important to distinguish them from another useful layout tool: guides. Grids I suppose that the best place to start is with a simple definition of what the grid. A grid breaks space or time into regular units. There are a few key elements that I want do draw out of this. Guides A grid, on the other hand, does translate into the finished design.
Background al 100% con CSS3 y Media Queries « Diseño Y Desarrollo Web « Tarjuccino <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href=" rel="nofollow"><img src=" alt="WP Greet Box icon"/></a></div>Hello there! If you are new here, you might want to <a href=" rel="nofollow"><strong>subscribe to the RSS feed</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href=" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">WP Greet Box</a><a href=" title="WordPress Plugin" style="text-decoration:none;">WordPress Plugin</a></div><div style="clear:both"></div></div></div> Probar el Ejemplo
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output
Tutorial: Transforma tu web en Responsive Design Miércoles, 30 d enero d 2013. Internet no para de evolucionar en todos los sentidos, incluso en su tecnología. Hay cosas que se van poniendo de moda y luego, poco a poco, se van dejando de lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a seguir". El "Responsive Design" o en español "Diseño adaptativo", es una de estas últimas. Un sistema basado en los estándares web actuales que permite que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Responsive Design se ha puesto muy de moda con el auge de la navegación movil, pero va mucho más allá, se trata de webs con diseños inteligentes (smart que dirían los ingleses) que facilitan la usabilidad de las webs en funcion de quien las observa. Por qué es complejo desarrollar webs en responsive design Básicamente por dos motivos: En definitiva, necesitamos más tiempo para que la mayoría puedan permitirse trabajar con diseños adaptativos. Entonces... 1. 2. 3. Se acabó! a.
Maximize the Use of Hover Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. 1. I use hover to beautify the layout of IconDock. 2. QBN makes its layout look cleaner by hiding the extra buttons on default. Gucci puts focus on their product images by hiding the variations. 3. Coda combines CSS and Javascript to create a beautiful tooltip. On Best Web Gallery, I use jQuery to display a larger image of the screencap. Tutorials Image Hover (see demo) The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. Animated Hover (see demo) The following demo use jQuery to animate the <em> text when you hover the link, as seen on the Coda site. jQuery Tooltip Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.
Introducción a @media de CSS3 La semana pasada vimos las nuevas pseudo clases de CSS nivel 3 o más comúnmente conocido como CSS3 y como utilizarlas. Hoy, vamos a hacer una introducción a las reglas @media de CSS3 y a la nueva forma de utilizarlas para mejorar la experiencia de usuario de las personas que entran a nuestros sitios web independientemente del dispositivo que estén utilizando para acceder a los mismos. La regla @media nos permite especificar que cierto conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo. Así las definiciones dentro del bloque de la regla @media screen { ... } solo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection { ... } solo se aplicaría a proyectores. CSS3 añade importantes y nuevas capacidades que nos permiten definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos que acceden a nuestros sitios. Media queries Usando media queries para especificar estilos La regla @media Conclusión
CSS3 Transitions And Transforms From Scratch There are some amazing examples of CSS transforms and transitions, and whilst you may be blown away by them, there's a good chance that you're also overwhelmed and a bit intimidated! This tutorial will take you back to the very basics. We're going to create some fundamental CSS3 transitional movements, step by step. A Quick Note on Browser Support: Support across browsers is already pretty reasonable. The Axes and Grid To help understand the movement easily we'll be working on an axis grid (which you'll probably recognize from basic math). The only (crucial) difference is that on our axis the -y value is above the x axis, whilst it would ordinarily be below it. Note: I'm going to assume that you're already familiar with HTML and CSS file structure. 1: Horizontal Movement The first movement we'll demonstrate is "horizontal"; we'll animate the object to move to the right and to the left. Moving to the Right Open your favorite Text Editor and enter the following html markup, then save the file.
Responsive Design para novatos. Tutorial básico. Responsive Design en ## Desde la llegada de HTML5 y CSS3, el Responsive Design o “Diseño Sensible” es una nueva técnica que se está empezando a utilizar cada vez más. Consiste básicamente en adaptar los diseños de las páginas web en función del tamaño de la ventana del navegador, cambiando según esta aumenta o disminuye y sin necesidad de disponer varias versiones de CSS o HTML. Podéis ver un pequeño ejemplo si redimensionáis el blog o si lo véis en un iPad; o podéis flipar si comprobáis hasta que punto se puede utilizar esta técnica entrando a Smashing Magazine o en mi página personal. El ejemplo que os voy a proponer es muy simple y solo cuenta con 3 pasos: Añadir un meta tag al header, añadir compatibilidad con navegadores antiguos y realizar modificaciones en el CSS. 1. En primer lugar debemos añadir el siguiente código entre las etiquetas “<head>” de nuestra página. 2. [html]<! 3. El funcionamiento es el mismo que si utilizásemos un condicional.
A Quick-Start Guide to Teaching Yourself Creative Software “I really need to learn how to use Photoshop.” “I don’t know how people do all that stuff with After Effects.” “If I only knew Ableton…” Does this sound like you? Learning creative software can be intimidating, but it’s not as hard as you might think. An ever-growing catalog of high-quality, online video tutorials available on sites like Lynda.com and Kelby Training are making learning on your own both efficient and engaging. For Photographers and Image Editors Kelby Training ($25/mo, $200/yr) KelbyTraining.com specializes in Photoshop and Photography by having skilled professional photographers teach courses in HD video. For Adobe Creative Suite Users AdobeTV (Free) Adobe provides a series of free tutorials for all of their creative suite products, including Photoshop, InDesign, Illustrator, Premiere, and more. For Musicians, DJs, and Sound Engineers For Videographers and Editors For Motion Graphics Designers and Animators For Web Developers For Everyone 1. 2. 3. 4. What Do You Use?
Responsive Web Design · Diseño Web, diseño gráfico y programación “Responsive Web Design“, en español “Diseño Web adaptativo” es el método que sugiere que el diseño y el desarrollo Web deben responder al comportamiento y entorno del usuario. En pocas palabras, un sitio Web se debería adaptar correctamente al dispositivo con el que se está navegado, dígase smartphone, tablet, Web browser, etc; lograr que el sitio se adapte visual y funcionalmente al medio con el que se está accediendo a él. Esta práctica se lleva adelante poniendo en juego un conjunto de herramientas; templates flexibles, imágenes que se ajustan, javascript para identificar los tamaños de pantalla, CSS media queries para establecer estilos según los dispositivos, etc. El sitio deberá automáticamente adaptarse al tipo de dispositivo mostrando su contenido de manera correcta para le usuario. Media Queries Existen dos maneras de aplicar media queries, una de ellas es dentro de una hoja de estilos ya creada y la otra es crear hojas de estilos específicas según el dispositivo. Javascript Sony
CSS3 Hover Effects Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use. HTML Markup This simple structure allows us to make these effects. <div class="view"><img src="images/1.jpg" /><div class="mask"></div><div class="content"><a href="#" class="info" title="Full Image">Full Image</a></div></div> Here you will set the basic properties of our tutorial. 1 Example Add the special class effect to the element with the class view for this effect. <div class="view effect"><img src="images/1.jpg" /><div class="mask"></div><div class="content"><a href="#" class="info" title="Full Image">Full Image</a></div></div> Go to View the Example 2 Example 3 Example