CSS



Voici un recueil de liens que je trouve très bien et que je partage ici…

Centrer un tableau en CSS

  • Inclure les 3 attributs dans le style de l’objet :
margin-left: auto; margin-right: auto; width: ...px;

Balises CSS3

  • Les codes CSS3 ci-dessous fonctionnent à partir des versions des navigateurs suivants : Firefox 3.5 ou +,
  • Chrome 10 ou +,
  • Opera 11 ou +,
  • IE 9 ou + (à voir …).

Positionnement

  1. Playing with Media Queries mediaqueries
  2. Flexible Box Model Flexible Box Model
  3. CSS3 multiple columns layout columns

Navigation

  1. Navigation buttons border-radius gradients
  2. CSS3 transitions on navigation transition
  3. Dropdown Menu (clic): target opacity transitions gradients border-radius
  4. Slideshow image gallery: target opacity transitions border-radius
  5. Scrolling image gallery: target transitions border-radius
  6. Fluid navigation with flexible box model Flexible Box Model transitions

Texte

  1. Word wrapping word-wrap
  2. Fixing whitespace with CSS3 rem unit rem

Décorations

  1. Breadcrumb without images border-radius radial-gradient siblings selector
  2. Vignetting images with CSS3 radial gradient background-image
  3. CSS3 border-image testcases border-image
  4. background-image cover background-size
  5. HTML5 / CSS3 forms styling input :required :valid :invalid
  6. Badge with :before :after and CSS3 rotation: before :after transform
  7. Only-child testcase: only-child
  8. Dynamic siblings selector general siblings :target
  9. A checking cart using siblings selector general siblings :target

HTML 5

  1. A todolist with HTML LocalStorage localStorage contenteditable jQuery
  2. Personnal calendar width HTML5 localstorage localStorage contenteditable jQuery

Balises CSS2

Ci-dessous, les balises compatibles avec Internet Explorer 8.

Formatage des tableaux

  1. Table layout table table-cell
  2. Vertical centering table table-cell vertical-align
  3. A footer at bottom with CSS2.1 Table-row table table-row
  4. CSS2.1 Table-row vertical box model table table-row
  5. Ordering blocks with Table Layout table-row table-header-group table-footer-group
  6. Movable flexible boxes with CSS2 table-cell table table-cell :target
  7. Positioning elements with caption-side table caption-side
  8. Navigation with table model table-cell border-radius transition
  9. Who said that mobile web killed table layout ? table-cell media queries

Navigation

  1. Animated dropdown (hover) menu: hover inline-block
  2. Icon and images with Data URI Data URI
  3. Navigation with table model table-cell border-radius transition

Décorations

  1. Using special characters font
  2. Icon and images with Data URIData URI
  3. Table data styling HTML table table-layout table-caption
  4. Clearing Floats with generated content: after clear
  5. Tooltip with CSS2 :after: after
  6. Breadcrumb with generated content: before sibling selector
  7. Preventing overflows with max-width max-width
  8. Styling all item except first sibling selector
  9. Using sibling to style the last item sibling selector

 

Liens utiles

http://webdesign.tutsplus.com/tag/css3/

 

 




Retour