background preloader

25 Incredibly Useful CSS Snippets for Developers

25 Incredibly Useful CSS Snippets for Developers
CSS is no doubt up there with the most important web languages that we use. While html provides the structure it can be inconsistent and unpredictable across different new and old browsers. Css is where the html is styled though, and where we get creative as well as addressing those inconsistencies. Below is a fantastic list of 25 Css snippets that I am sure you will find extremely useful. Whether you are a veteran web developer, or are just getting your foot in the door of css, they are all well worth checking out. Hide text with text indent This is extremely useful for use for things such as your company logo. Style links depending on file format This snippet is aimed at user experience. Remove textarea scrollbar in IE Internet Explorer has an annoying habit of adding scrollbars to textarea’s even when the textarea’s content is not overflowing. Drop cap Commonplace these days in blogs and news sites is the dropcap. Css Transparency Css Reset by Eric Meyer Image preloader Google Font API Related:  CWR HTML5 CSSweb design

Crear rollover con CSS Sprites El efecto rollover (deslizar encima) es el término anglosajón por el que se conoce al efecto de mover el ratón sobre un icono de una web, y este cambie a otra forma, color o icono, dándo a entender que es un botón presionable. En este tutorial, vamos a ver como realizar un rollover simple con imágenes, utilizando una técnica llamada CSS Sprites. ¿Por qué con esta técnica? Pues por varias razones: Simplicidad: Se trata de una técnica muy simple que requiere muy poco código. 1. Antes de comenzar, tenemos que diferenciar las dos partes de nuestro código que vamos tocar: Código HTML: La capa de información. El código CSS puede estar «embebido» en una página (como en el ejemplo) o, como suele ser más común y aconsejable, en un fichero externo de extensión .css. 2. En nuestro código html vamos a colocar un enlace normal y corriente, con la única diferencia que le añadiremos un #id para diferenciarlo de otros enlaces. 3. Antes de continuar, vamos a definir el tamaño de nuestro botón (una unidad).

Karate Corners: XHTML/CSS Rounded Corners | Kyle Schaeffer - Web Design and SharePoint Branding I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested <div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once. Update: Read my subsequent post for a more advanced example of this technique!Update: Read a even more advanced version of this technique in an even newer tutorial!Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery. I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. The Code The HTML code is relatively simple. <div class="cornerBox"><div class="corner TL"></div><div class="corner TR"></div><div class="corner BL"></div><div class="corner BR"></div><div class="cornerBoxInner"><p>Lorem ipsum dolor sit amet. The Image

Getting Started With Sass System Requirements Before proceeding, you'll want to install the following on your system: Starting in Foundation 5, we've started using bower to manage the updating process of Foundation. It only needs to be installed one time using the following command: Bash [sudo] npm install -g bower grunt-cli Then you can install our CLI using the following command: gem install foundation Using Foundation With Grunt + Libsass At ZURB, we prefer to run Foundation with using Grunt in conjunction with Libsass, because it's the fastest way to compile your Sass stylesheets. Create a New Project First, navigate into the directory where you want to create your project. cd path/to/sites Next we'll use the Foundation CLI to create a new project: foundation new project_name --libsass Boom, your project is created! cd project_name grunt build New Project Updating Your Project cd MY_PROJECT foundation update Using Foundation With Compass Compass is the easiest way to get going with Sass. foundation new MY_PROJECT

20 Linux System Monitoring Tools Every SysAdmin Should Know Need to monitor Linux server performance? Try these built-in commands and a few add-on tools. Most Linux distributions are equipped with tons of monitoring. Finding out bottlenecks.Disk (storage) bottlenecks.CPU and memory bottlenecks.Network bottlenecks. #1: top - Process Activity Command The top program provides a dynamic real-time view of a running system i.e. actual process activity. Fig.01: Linux top command Commonly Used Hot Keys The top command provides several useful hot keys: => Related: How do I Find Out Linux CPU Utilization? #2: vmstat - System Activity, Hardware and System Information The command vmstat reports information about processes, memory, paging, block IO, traps, and cpu activity. # vmstat 3 Sample Outputs: Display Memory Utilization Slabinfo # vmstat -m Get Information About Active / Inactive Memory Pages # vmstat -a => Related: How do I find out Linux Resource utilization to detect system bottlenecks? #3: w - Find Out Who Is Logged on And What They Are Doing # ps -AlFH

25 CSS Snippets for Some of the Most Common and Frustrating Tasks In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets? As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more. Adding shadow to text – text-shadow Helps make your text stand out from the rest. Source Adding an image-based border – border-image You can create any kind of border you want for any object(s) on your website using this. Adding shadow to borders and images – box-shadow Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at. Adding rounded corners – border-radius Self-explanatory. Adding individual rounded corners – border-radius Adding a gradient – linear-gradient

Menú CSS con imágenes precargadas (CSS Sprites) - Para tu pagina En este tip les mostraré cómo crear un menú hecho sólo a base de imágenes, precargadas (sin javascript) y amigable con los buscadores. Este método se llama CSS Sprites, y lo recomiendo muchísimo a todos porque yo estoy segura que a más de uno le ha pasado que cuando pasan el mouse sobre un menú que es de imágenes o que tiene una imágen de fondo, se debe esperar 1 o 2 segundos a que la imágen del rollover cargue. Eso en lo personal me parece molesto porque interfiere en mi experiencia de usuario; al precargar las imágenes le ofrecemos al usuario una experiencia más placentera. Y más adelante les mostraré cómo este método también es muy útil para Aplicaciones Web cuya presentación es en html/xhtml, así que a los desarrolladores les va a interesar puesto que optimiza la carga de aplicaciones. Los Sprites Primero ¿qué son los Sprites? Entonces ¿que tienen que ver los sprites con CSS? Preparando la imágen La siguiente es la imágen que usaré para mi ejemplo: Preparando el XHTML Código : El CSS

Useful CSS Snippets - webSemantics author: mike foskett incept: 5th June 2005 last update: 24th September 2012 A few useful snippets for style sheets. Table striping with CSS3 Author: Christopher Schmitt uploaded: 24th September 2012 Stripe every other table row using CSS only: Original testing: Zebra striping tables with CSS3 Prevent unused background images downloading Author: Tim Kadlec uploaded: 18th September 2012 Marking a container, which has a background image, with display:none is insufficient to prevent it being downloaded by the browser. This will prevent the browser automatically downloading the image: Original testing: Media Query & Asset Downloading Results Fix IE text anti-aliasing when using filters Author: Unknown uploaded: 20th March 2012 When using IE's filter property it can remove the anti-aliasing from text. Solution found in the comments of Using IEs filter in a cross browser way CSS hacks targeting IE v6 through to 9 Author: Unknown uploaded: 17th August 2011 Hacks to access specific IE browsers: Alternatively:

Crafto - One page responsive HTML template Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta repellat hic deleniti dignissimos provident cupiditate quibusdam adipisci facere? Nobis, ducimus, ullam commodi inventore consequuntur adipisci quam cupiditate vel optio rerum. Read More This is a long blog post Lorem ipsum dolor sit amet, consectetur adipisicing elit. This is the title Lorem ipsum dolor sit amet, consectetur adipisicing elit. 7 Clever Google Tricks Worth Knowing Email Below I have compiled a list of 7 clever Google tricks that I believe everyone should be aware of. Together I think they represent the apex of the grand possibilities associated with Google search manipulation tricks and hacks. 1. 2. 3. You’re connecting to a public network at a coffee shop or internet café and you want privacy while you browse the web. There are subscription services and applications available such as TOR and paid VPN servers that do the same thing. 4. 5. 6. 7. Bonus Material: Here is a list of my favorite Google advanced search operators, operator combinations, and related uses: Want more info on Google Hacking? If you enjoyed this article, check out our new best-selling book. And get inspiring life tips and quotes in your inbox (it's free)...

3 astuces CSS fort utiles Voici quelques astuces CSS assez utiles, mais très peu utilisées. Au menu : Bien utiliser <HTML> et <BODY>Appliquer un style à tous les éléments.Donner plusieurs « class » à un élément Bien utiliser <HTML> et <BODY> <HTML>, comme tout autre élément, peut être personnalisé via les CSS. Appliquer un style à tous les éléments. Il est possible d’appliquer un style général à tous les éléments, via * Cette technique est utilisée par certaines feuilles de Reset CSS, pour appliquer des marges intérieurs et extérieures de 0 par défaut sur tous les éléments. Donner plusieurs « class » à un élément Il est possible de donner plusieurs valeurs à un attribut class, ce qui permet de gérer plus proprement certains éléments. avec comme résultat « texte rose et souligné« . edit : comme l’a noté Kazhar dans les commentaires, il faut nommer ses classes CSS en fonction de l’utilité de l’élément, mais pour le coup, il me fallait un exemple facile à comprendre, et à expliquer

HTML5 Master your CSS3! Ultimate CSS code snippets | CSS3 is coming and we as webdesigners should be ready for it! CSS is no doubt one of the most important web languages to style a website. (x)html provides the structure and CSS the style. It is where most of us get creative. Below is a fantastic list of Css snippets that we are sure you will find extremely useful. Css Reset by Eric Meyer Eric Meyer’s css reset has become almost standard. Hide text (to place logo) with text indent Hiding text can be extremely useful to hide company logo. Style links depending on file format Since CSS3 you can style links depending on some rules also called attribute selectors. Remove textarea scrollbar in IE Internet Explorer adds a scrollbars to textarea even when the textarea’s content is not overflowing. Drop cap For hundreds of years, initials have been used to set off the first letter of a chapter or paragraph. Css Transparency Transparency always add a nice touch to the design of your blog. Image pre-loader Resize background image Multiple Background Images