Thursday, 28 November 2013

HTML5 Element Index

Double-Colon for Pseudo-Elements


To differentiate between pseudo-elements and pseudo-classes, in CSS3 all pseudo-elements have a double-colon syntax. So instead of: :before, you do ::before.

All browsers are going to support the single-colon syntax, pretty much indefinitely, to abide by good design principles.

So that means we won’t be using the double-colon syntax until all browsers that don’t support it (including IE8, the current browser leader) are completely gone — which might not be for at least 2 or 3 years, and probably more.



( :root ) in css

The :root selector allow  you to target the highest-level 'Parent' element in the dom, or document.


We can take advantage of being able to apply CSS to the  <html> element to skip the wrapper div and keep our markup clean!



Browser Support for CSS3 Selectors


The Status of the ::selection Pseudo-element?

HTML5 Boilerplate put the ::selection pseudo-element on the map, so to speak, most CSS developers now a days have been including this selector as part of their universal styles.



HTML5 Element Index

Head Part
  • Doctype
  • Title
  • Base
  • Link
  • Meta
  • Style
  • Script
  • Noscript
Section
  • body
  • article
  • nav
  • aside
  • section
  • header
  • footer
  • h1-h6
  • main
  • address
Grouping
  • p
  • hr
  • pre
  • blockquote
  • ol
  • ul
  • li
  • dl, dt, dd
  • figure
  • figcaption
  • div
Tables
  • table
  • caption
  • thread
  • tbody
  • tfoot
  • tr, th, td
  • col, colgroup
Form
  • form
  • fieldset
  • legend
  • label
  • input
  • button
  • select
  • datalist
  • optgroup, option
  • textarea
Form 2 HTML5
  • keygen
  • output
  • progress
  • meter
  • detail
  • summary
  • command
  • menu
Embedded
  • img
  • iframe
  • embed
  • object
  • param
  • video
  • audio
  • source 
  • canvas
  • track
  • map
  • area
Text-level
  • a
  • em
  • strong
  • i, b
  • u
  • a
  • small
  • abbr
  • q
  • site
  • dfn
  • sub, sup
Text-level 2 HTML5
  • time
  • code
  • kdb
  • samp
  • var
  • mark
  • bdi
  • bdo
  • ruby, rt, rp
  • span
  • br
  • wbr

Thursday, 14 November 2013

30 things you no longer need because of SMART PHONES



  1. Phones
  2. Flashlights
  3. Rolodex
  4. Newspapers
  5. Magazines
  6. Compasses
  7. Cameras
  8. Notepad
  9. Voice Recorder
  10. Calculator
  11. Watches
  12. Calculator Watches
  13. Alarm Clocks
  14. Egg Timers
  15. Stopwatches
  16. Mail
  17. Portable Game System
  18. Maps
  19. GPS System
  20. Encyclopedias ( Wiki )
  21. Radios
  22. Walkmen
  23. Record Stores
  24. Yellow Pages
  25. Takeout Menus
  26. Weathermen
  27. Photo Album
  28. Remembering Anything
  29. Boredom
  30. Conversation

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements

Thursday, 7 November 2013

Multiple Backgrounds Using Css

Tinted Images with Multiple Backgrounds and Multiple background images

The background property in css can accept comma separated value. "Multiple" backgrounds.
.tinted-image{
  background: linear-gradient ( rgba( 255, 0, 0, 0.45), rgba( 255, 0, 0, 0.45), )
}



Which CSS Measurements To Use When

It can be difficult for web developers to understand which units to use where, and when, on their pages.
Pixels ( px ), Percentage ( % ), em, ex, Points and Picas

Pixels 
Use for: hairline borders and general elements when creating fixed-width designs.

Percentage 
Use for: making responsive images and containers; setting height on the body in some cases.

em, ex
Use for: typography, and elements related to typography.

Points and Picas
Use for: print stylesheets.



I love Typography

Expletus Sans is a fifteen-year old google free font

It was March 2nd, 2011. For more details  Click me:-