49540 Class Links, Week 5

MORE on SELECTORS: PSEUDO-CLASS, PSEUDO-ELEMENT

Rules for links: review

http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html Pseudo-classes for links

http://webtint.net/tutorials/the-mysterious-pseudo-class-in-css/ Pseudo-classes for links

http://www.dynamicdrive.com/style/csslibrary/item/css-pseudo-classes/P10/ Pseudo-classes for links

http://www.eskimo.com/~bloo/indexdot/css/syntax/pseudo/pseudoclass.htm Pseudo-classes for links

GENERAL REVIEW of SELECTORS

http://www.eskimo.com/~bloo/indexdot/css/syntax/selectors/selectors.htm Selectors

http://www.brainjar.com/css/using/ Overview of CSS Style Sheets; including review of selectors, pages 1 & 2

http://gallery.theopalgroup.com/selectoracle/ Selectoracle: site will deconstruct and explain selectors on a site

Drop Cap Example

Example using pseudo class

Devil's Tower Named First US National Monument (1906). Dramatically rising 1,267 ft (386 m) above the surrounding terrain, Devil's Tower is a cluster of rock columns in the Black Hills of Wyoming formed by the cooling and crystallization of molten matter. The site, which many Native American Plains tribes consider sacred, was declared the first US National Monument by President Theodore Roosevelt in 1906. A popular rock-climbing site, the monument attracts some 400,000 visitors each year. Why do most climbers abstain from scaling the tower in June?

.dropcap:first-letter {
font-size: 60px;
color: red;
padding-right: 2px;
float: left;
margin: 2px 0 -1px;
}

Example using span to isolate first letter 'D' as in <span>D</span>

.dropcap2 {
font-size: 58px;
color: yellow;
line-height:42px;
background: black;
float: left;
margin: 2px 4px -1px 0;
font-family: baskerville, times, serif;
padding: 6px 0 0 0;
}

First Line Example

.firstline:first-line {
font-weight: bold;
color: red;
}

Generated Text Example

.extratext:before {
content: "this is NOT in the html, it's generated ";
color: green;
font: italic bold 24px gillsans, "arial black", arial;
}

.extratext:after {
content: "and so is this ";
color: red;
font: italic bold 14px gillsans, "arial black", arial;
}

Advanced Selectors Examples

http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html Drop Cap

http://www.w3schools.com/Css/tryit.asp?filename=trycss_firstline First line

OPACITY

CSS3 OPACITY

http://www.css3.info/introduction-opacity-rgba/ Basics of CSS3 opacity using RGBA

http://www.zenelements.co.uk/blog/css3-rgba-color-opacity/ More on RGBA

http://dorward.me.uk/www/css/alpha-colour/ More on RGBA

http://css-tricks.com/rgba-browser-support/ More on RGBA

CSS3 opacity [RGBA] is not inherited, the 'opacity' property in CSS2.1 is inherited

CSS2.1 Opacity

http://css-tricks.com/css-transparency-settings-for-all-broswers/ Using opacity, cross-browser

http://www.w3schools.com/css/css_image_transparency.asp Using opacity

http://www.mandarindesign.com/opacity.html Using opacity

http://www.quirksmode.org/css/opacity.html Using opacity

ROUNDED CORNERS BOXES

CSS3 Rounded Corners box

http://www.css3.info/preview/rounded-border/ CSS3 Rounded Corners Box techniques with border-radius

http://www.the-art-of-web.com/css/border-radius/ Border-radius complete reference

http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/ CSS3 Rounded Corners Box techniques for IE

CSS3 Rounded Corners box and drop shadow

http://www.css3.info/preview/box-shadow/ Add a CSS3 drop shadow

http://www.westciv.com/tools/boxshadows/index.html Nice interactive tool for testing drop shadow

http://css.flepstudio.org/en/css3/box-shadow.html Add a CSS3 drop shadow

http://brightchimp.com/2008/09/07/hand-drawn-speac-bubble-using-css3-border-image/ This is a great example of an image border! However the page shows a screen shot, and not the actual CSS-generated file, so it will look like it works in Opera, but it doesn't.

http://www.lrbabe.com/sdoms/borderImage/index.html an example of various image borders

Code for CSS3 rounded corners background

This is a box with rounded corners.


.rounded1 {
background: pink; 
border: 2px solid black;
width: 60%;
text-align: center;
padding: 8px;
border-radius: 8px;   			/* css standard tag */
-moz-border-radius: 8px; 		/* firefox engine */
-webkit-border-radius: 8px;  		/* safari/iPhone/chrome engine */
}

This is a box with rounded corners.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

.rounded2 {
background: black; 
border: 8px solid green;
line-height: 140%;
width: 220px;
padding: 18px 24px;
border-radius: 18px;				/* css standard tag */
-moz-border-radius: 18px;			/* firefox engine */
-webkit-border-radius: 18px;		/* safari/iPhone/chrome engine */
color: white;
}

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default


.strokebg1 {  
line-height: 140%;
width: 220px;
padding: 18px 24px;
border-width: 12px;  /* sets the border width */
border-image: url(multiborder.png) 12;
-webkit-border-image:  url(multiborder.png) 12;
-moz-border-image:  url(multiborder.png) 12;  /* stretch, repeat, or round  */
color: white;
}

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

  same settings as .strokebg1, different image

This is a box with rounded corners and a BG image in the border.
It will expand as the text gets longer and longer. Text here is aligned left, which is the default

 same settings as .strokebg1, different image

This is a box with rounded corners and a dropshadow

.dropshadow1 {
background: lightgreen; 
width: 60%;
text-align: center;
padding: 18px;
border-radius: 18px;   /* css standard tag */
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
color: darkgreen;
box-shadow: 5px -5px 10px #888;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #888;
}

This is a box with rounded corners and a dropshadow


dropshadow2 {
background: lightyellow; 
border: 1px solid green;
width: 60%;
text-align: center;
padding: 18px;
border-radius: 22px;   /* css standard tag */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
color: darkgreen;
box-shadow: 15px 10px 20px #888;
-webkit-box-shadow:15px 10px 20px #888;
-moz-box-shadow: 15px 10px 20px #888;
}

Square box, drop shadow only


.dropshadow3 {
background: lightpink; 
border: 1px solid green;
width: 60%;
text-align: center;
padding: 18px;
color: darkgreen;
box-shadow: 15px 10px 20px #888;
-webkit-box-shadow:15px 10px 20px #888;
-moz-box-shadow: 15px 10px 20px #888;
}

Rounded tab


.tab {
background: tan; 
width: 15%;
text-align: center;
padding: 11px;
border-top-right-radius: 18px;   /* css standard tag */
border-top-left-radius:18px;
	-moz-border-radius-topright: 18px;
	-moz-border-radius-topleft: 18px;
	-webkit-border-top-right-radius: 18px;
	-webkit-border-top-left-radius: 18px;
color: darkgreen;
box-shadow: 5px -5px 10px #888;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #888;
}

Used in a list menu


we will do this later when we do lists and menus

CSS2.1 Rounded Corners box

See my example in the class folder

http://css-discuss.incutio.com/?page=RoundedCorners Extensive list of Rounded Corners Box techniques

http://www.lesliesommer.com/wdw07/html/ More Rounded Corners: with some decorative touches

FLOATS

http://css.maxdesign.com.au/floatutorial/ Float Tutorial

http://www.smashingmagazine.com/2007/05/01 /css-float- theory-things-you-should-know/ Comprehensive list of floats articles

http: //www.complexspiral.com/publications/containing-floats Containing floats

http://www.quirksmode .org/css/clearing.html Floats and clearing

http://css-discuss.incutio.com/?page=FloatLayouts Floats and clearing

http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/ Clearing Floats

http://matthewjamestaylor.com/blog/floating-boxes-css-layout Float layout using float drops

http://www.positioniseverything.net/articles/onetruelayout/anyorder Re-ordering columns using floats

http://www.alistapart.com/articles/ negativemargins/ Float using negative margins

REVIEW

Articles on POSITIONING

CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/ Tutorial on positioning

http://www.brainjar.com/css/positioning/ CSS positioning summary

http://www.dynamicdrive.com/style/layouts/category/C13/ Liquid layouts [note: these pages mix 'liquid/fluid' layouts which are %-based and 'elastic' layouts which are em-based]

Fixed, Fluid, Elastic Layouts

http://green-beast.com/blog/?p=199 Units of calculation in pixels, % and EMs

Design for the Web 2

49540 SPRING 2010

Week 5

MORE on SELECTORS: PSEUDO-CLASS, PSEUDO-ELEMENT

GENERAL REVIEW of SELECTORS

Drop Cap Example

First Line Example

Generated Text Example

Advanced Selectors Examples

OPACITY

CSS3 OPACITY

CSS2.1 Opacity

ROUNDED CORNERS BOXES

CSS3 Rounded Corners box

CSS3 Rounded Corners box and drop shadow

Code for CSS3 rounded corners background

Used in a list menu

CSS2.1 Rounded Corners box

FLOATS

REVIEW

Articles on POSITIONING

CSS Positioning in Ten Steps

Fixed, Fluid, Elastic Layouts

WORKFLOW

CSS Page Layout Examples

One more cool color tool

XRAY Tool

class site: http:// www.annetteweintraub.com/courses/49540/49540.html