background preloader

* { box-sizing: border-box } FTW

* { box-sizing: border-box } FTW
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. Anyway, I have a recommendation for your CSS going forward: This gives you the box model you want. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. Is it safe to use? Totally. jQuery works pretty great with it (except this). One of my favorite use-cases that border-box solves well is columns. Performance Lastly on @miketaylr’s inquiry, I also tested perf overhead. You might get up in arms about the universal * selector. Apparently you’ve heard its slow. Related:  More CSSdiseño web

CSS3 ordered list styles Styling ordered lists was always a tricky task and I'm not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly. In this article you'll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach. The idea When I first read Roger Johansson's article about styling ordered list numbers, I must admit I seriously felt in love with that technique. View demo The HTML Below you'll find nothing than simple ordered list markup: <ol class="rounded-list"><li><a href="">List item</a></li><li><a href="">List item</a></li><li><a href="">List item</a><ol><li><a href="">List sub item</a></li><li><a href="">List sub item</a></li><li><a href="">List sub item</a></li></ol></li><li><a href="">List item</a></li><li><a href="">List item</a></li></ol> The CSS Further, I'll try to explain how this works in a few words. This technique uses Automatic counters and numbering.

Css hack para Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11 Los diseñadores y maquetadores web, sufren de cambios de estado cuando tiene que probar y hacer funcionar bien una página Web con Internet Explorer. Hoy por hoy una web se debe ver bien con Explorer 8 o superior. Por fín podemos descartar el Internet Explorer 7 por el poco trafico que genera que es inderior al 1%. Como nota de humor os dejamos la infografía con los estados de ánimo al probar un diseño de una página Web. Ahora vamso a grano. Hay varias formas de intentar hacer compatible nuestro diseño con las diferentes versiones del Microsoft Intenet Explorer y no morir en el intento. 1. Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales. Los comentarios condicionales fueron creados por Microsoft para su navegador y sólo son soportados por éste. Este tipo de hack se sitúa entre las etiquetas <head> y </head>. <! A continuación mostramos un ejemplo del uso de este hack: <! <! <! <! <! <! <! <! <! <! <! 2. 4. 5.

Initializr - Start an HTML5 Boilerplate project in 15 seconds! Cibler Internet Explorer dans une CSS ? Oui, et sans hack. La méthode commence à être rodée : pour intégrer un design en CSS, on commence par le faire sur un navigateur « moderne », puis on corrige les différents problèmes rencontrés sur Internet Explorer, surtout dans sa version 6, qui commence à sérieusement à s’incruster. Pour cela, il existe plusieurs solutions. Eviter les embrouilles Avec la pratique, un certain nombre de réflexes se mettent en place, et on anticipe immédiatement les problèmes. Malheureusement ça ne suffit pas toujours, et il n’y a parfois d’autre solution que de déclarer une propriété spécialement pour IE. Le bon vieux hack Allons-y joyeusement, il faut résoudre un bug sur IE6, et les hacks semblent pratiques et simples à utiliser. IE6 ne comprend pas le sélecteur « > ». C’est pratique. En suivant la même méthode, il faut donc trouver un nouveau bug de sélecteur dans IE7, et revoir la CSS. Il nous faut une autre solution, permettant de cibler efficacement Internet Explorer. Les commentaires conditionnels Voici le code modifié :

Can I use... Support tables for HTML5, CSS3, etc 8 Best Tools to Make Easy CSS3 Development CSS or cascading style sheet is basically a style sheet language that is used to describe the presentation semantics or the looks and formatting of a document. This document is written in a mark-up language. One of its basic uses is to style the web pages that are either written in HTML or XHTML but this language can also be applied to any other kind of document. CSS also does a major job that is it separates the content of the document from the presentation of the document and in addition it also includes features like layouts, colors and fonts. This separation that is done by CSS improves the accessibility of the content and also provides more flexibility and control in the specification of presentation. CSS3 is similarly an improved version of CSS and it helps the designers to insert stylish fonts and effects to their website very easily. This is very helpful css3 code generator, Create code for some most popular CSS3 Properties - text-shadow, border-radius, Box Resize and more.

internet explorer - IE 10 + 11: CSS transitions with calc() do not work Resizing images with PHP The following script will easily allow you to resize images using PHP and the GD library. If you’re looking to resize uploaded images or easily generate thumbnails give it a try Update: Looking to resize transparent PNG’s and GIF’s? Usage Save the code from the ‘the code’ section below as SimpleImage.php and take a look at the following examples of how to use the script. The first example below will load a file named picture.jpg resize it to 250 pixels wide and 400 pixels high and resave it as picture2.jpg If you want to resize to a specifed width but keep the dimensions ratio the same then the script can work out the required height for you, just use the resizeToWidth function. You may wish to scale an image to a specified percentage like the following which will resize the image to 50% of its original width and height You can of course do more than one thing at once. The output function lets you output the image straight to the browser without having to save the file. The code

Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial

The 30 CSS Selectors you Must Memorize ¿Así que aprendiste los selectores básicos id, class, y descendant – y ahora te retiras? Si es así, te estás perdiendo un enorme nivel de flexibilidad. Mientras que muchos de los selectores mencionados en éste artículo son parte de CSS3, y están por tanto, sólo disponibles en navegadores modernos, te debes a ti mismo el compromiso de memorizarlos. Comencemos con los más obvios, para los principiantes, antes de continuar con selectores más avanzados. El asterisco se centrará en cada uno de los elementos en la página. El * puede ser usado también con selectores de hijos. Esto se centrará en cada uno de los elementos que sea hijo del #container div. . Ver Demo IE6+ Firefox Chrome Safari Opera Prefijar el símbolo numérico a un selector nos permite seleccionar por id. Pregúntate a ti mismo: ¿necesito absolutamente aplicar un id a este elemento para afectarlo? Los selectores id son rígidos y no pueden ser re-utilizados. Ver Demo Ver Demo El siguiente selector más común es el selector descendiente.

10 Premium CSS3 Drop Down Mega Menu From Codecanyon CSS or cascading style sheet is basically a style sheet language that helps to describe the presentation semantics or it describes the looks and formatting of a document. The document is written in a mark-up language. CSS is therefore the most common application that is used to design the web pages written in HTML or XHTML but it can be pretty much applied to plain documents as well. This software is primarily designed to separate the content of the document that is written in HTML language from the presentation of the document. CSS3 also has an amazing drop down menu. Mega dropdown is a pure CSS dropdown menu which is easily customizable and features 5 included color schemes (red, blue, orange, green, grey). This is a CSS3 Menu inspired in the new Microsoft Metro UI. An easy-to-use CSS Mega Menu with both vertical and horizontal implementations. This Mega Drop Down Menu is a flexible and easy to integrate solution to build your custom menus.

css3 - How to use calc() inside another function How to Create an Awesome Scrolling Navigation using jQuery - thebeebs I was looking over the .net award nominees this week and stumbled across the flipboard.com website. I loved the scrolling navigation so much I just had to open up visual studio and try and recreate it myself. DemoView Demo The main thing flipboard do differently is to have the logo and logo background elements move at different animation speeds from each other and the main content. I’ve documented the main steps to recreate my demo below: Step 1 First we need to make reference to the jQuery Library as we are going to use it alot. Step 2 Next we will want to add our HTML to the page this HTML will hold all of the layers and links that we will need to get the example running. The background triangle moves at a slightly different speed to the logo and so needs it’s own <div>. By wrapping all the contentItems in a contentwrapper it will make it easier to scroll the contentItems into view using JQuery. Step 3 You will also need to setup the page layout when the website loads. Step 4 Step 5 Step 6

Font Awesome

Related: