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
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
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:
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
Master your CSS3! Ultimate CSS code snippets | djavupixel.com
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
Gérer les débordements de contenus grâce à CSS
Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Voici comment mettre en œuvre cette propriété : Exemple (HTML) : Partie CSS : Compatibilité Conclusion
Making Your Footer Stay Put With CSS | Blog | FortySeven Media
One problem I run into pretty frequently when coding a site in to XHTML and CSS is making my footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window. I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at the bottom of the screen no matter how tall the window is. So if I have a page with a lot of content that footer shouldn’t show up until the content is done. This tutorial assumes a few things: 1. So first we need to make sure that everything except the footer is inside a container div. <div id="container"><div id="header">Header</div><div id="nav"><ul><li><a href="#">Home</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li></ul></div><div id="content">Content Here. Now, onto the footer. What’s that? Alright!
