Week # 17 Challenge: CSS 3.0

Page 1 of 1

9 Replies - 7811 Views - Last Post: 03 May 2010 - 12:54 PM

#1 SixOfEleven

using Caffeine;

Reputation: 929

Posts: 6,316
Joined: 18-October 08

Week # 17 Challenge: CSS 3.0

Post icon Posted 26 April 2010 - 01:58 PM

Week 17 Challenge: CSS 3.0

Posted Image

Challege by jrm402

CSS (Cascading Style Sheets) is a styling language used primarily to apply visual semantics to web markup. CSS 2 is currently the standard but CSS 3 is on the rise and beginning to become supported by most major browsers (Firefox and Chrome for starters).

CSS 3 will be supporting a varied range of new techniques web developers could only dream of doing in Photoshop such as:

Drop Shadows
Gradients
Box Model Rotation
Web Font Implementation
Much, Much More!

Here's some documentation on CSS 3:

A couple ideas to get you started:

Make an element appear to float using the drop shadow attribute
Mess around with rounded corners
Make 3D elements by overlaying elements. Use background-color, border, and drop shadow effects.
Extra Credit: Use jQuery and CSS 3 to make cool animations!

For help be sure to visit the HTML & CSS forum.

Is This A Good Question/Topic? 0

Replies To: Week # 17 Challenge: CSS 3.0

#2 SwiftStriker00

Microsoft Insider

Reputation: 429

Posts: 1,596
Joined: 25-December 08

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 06:17 AM

Wow, I updated my website in perfect time. I pretty much had to teach myself CSS. I used the Drop shadow to create a nice subtle effect on my main content of items:

http://www.cs.rit.edu/~rmb1201/

.item{
	/* basic */ 
	background-color: #fff;
	 margin: 10;
	 width: 700px;
	 padding: 10px;
	 /*text-align: center;
	 border-radius */
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 border-radius: 5px;
	/* box-shadow */
	 -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
	 -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
	 box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

Since i finished this right before the challenge, I'll look into adding some more 3.0 stuff. Does anyone have any tips/tools for making stuff work across multiple browsers? (i.e. making stuff work in IE >.<

)

This post has been edited by SwiftStriker00: 27 April 2010 - 06:18 AM

Was This Post Helpful? 0

#3 Guest_Amrykid*

Reputation:

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 07:43 AM

SwiftStriker00, on 27 April 2010 - 05:17 AM, said:

Wow, I updated my website in perfect time. I pretty much had to teach myself CSS. I used the Drop shadow to create a nice subtle effect on my main content of items:

http://www.cs.rit.edu/~rmb1201/

.item{
	/* basic */ 
	background-color: #fff;
	 margin: 10;
	 width: 700px;
	 padding: 10px;
	 /*text-align: center;
	 border-radius */
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 border-radius: 5px;
	/* box-shadow */
	 -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
	 -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
	 box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

)

You could test it for IE9 using http://ie.microsoft.com/testdrive/. New Build every 8-9 weeks. Pretty good Box-Shadow and Border-radius support.
----------
I would like to enter my site : http://amrykid.fusionet24.com
I have some borders and drop shadows.

Was This Post Helpful? 0

#4 Shane Hudson

D.I.C Technophile

Reputation: 341

Posts: 1,281
Joined: 06-December 09

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 08:17 AM

I use CSS3 a lot. If I need to do something that CSS3 can do, I use that instead of Javascript or any other common methods. For this reason I no longer support IE6 and sometimes there is limited appearance in other browsers but never limited function.

My main website's theme is currently down for redesign so perhaps I shall try to finish it quickly and submit that?

Was This Post Helpful? 0

#5 Nykc

Gentleman of Leisure

Reputation: 701

Posts: 8,577
Joined: 14-September 07

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 08:41 AM

Since I have been working on a re-design of one of my websites I decided to play with the CSS3 gradient buttons based off another tutorial I seen. Definitely going to add this to my repertoire.

Link here: http://nykc.net/DIC/css3button.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>CSS 3 Buttons with Gradient</title>
		<style type="text/css">
		body { text-align: center; }
		/* CSS3 Gradient Button *****/
		.button { 
			display: inline-block;
			outline: none;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			font: 0.75em Arial, Helvetica, sans-serif;
			padding: .5em 2em .55em;
			text-shadow: 0 1px 1px rgba(0,0,0,.3);
			-webkit-border-radius: .5em;
			-moz-border-radius: .5em;
			border-radius: .5em;
			-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
			-moz-box-shadow:  0 1px 2px rgba(0,0,0,.2);
			box-shadow: 0 1px 2px rgba(0,0,0,.2);
		}
		.button:hover { text-decoration:none; }
		.button:active { position: relative; top: 1px; }
		
		/* red */
		.red { 
			color: #d9eef7;
			border: solid 1px #000;
			background: #992300;
			background: -webkit-gradient(linear, left top, left bottom, from(#992300), to(#ED3a1b)); 
		}
		.red:hover { 
			background: #ED3a1b;
			background: -webkit-gradient(linear, left top, left bottom, from(#ED3a1b), to(#992300));
		}
		.red:active { 
			color: #992300;
			background: -webkit-gradient(linear, left top, left bottom, from(#ED3a1b), to(#992300));
		}
			/* blue */
		.blue { 
			color: #d9eef7;
			border: solid 1px #000;
			background: #000086;
			background: -webkit-gradient(linear, left top, left bottom, from(#000086), to(#1458e7)); 
		}
		.blue:hover { 
			background: #1458e7;
			background: -webkit-gradient(linear, left top, left bottom, from(#1458e7), to(#000086));
		}
		.blue:active { 
			color: #1458e7;
			background: -webkit-gradient(linear, left top, left bottom, from(#000086), to(#1458e7));
		}
		</style>
	</head>
	<body>
		<a href="#" class="button red">Red Button</a>
		<a href="#" class="button blue">Blue Button</a>
	</body>
</html>

This post has been edited by Nykc: 27 April 2010 - 08:47 AM

Was This Post Helpful? 0

#6 aniri

D.I.C Addict

Reputation: 54

Posts: 657
Joined: 24-November 09

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 12:33 PM

I've made a zebra table! (only did this cause the name is funny

)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />

<title>Zebra test</title>

<style type='text/css'>
    
    body {
        font: 14px Verdana, sans-serif;
		color: #000;
        text-align: center;
        padding-top: 20px;
    }
	
	table {
		margin: auto;
		width: 600px;
		text-align: left;
		border: 1px solid #1d507d;
	}
	
	h1 {
		font: 400% Georgia, serif;
	}
	
	th:nth-child(2n) {
		background-color: yellow;
	}
	
	td:nth-child(2n+1) {
		background-color: #1d507d;
	}
		
</style>
</head>

<body>
	<h1>Zebra table</h1>
		
	<table border="1">
		<tr>
		<th align="center">Some header</th>
		<th align="center">Another header</th>
		<th align="center">One more header</th>
		<th align="center">Just a header</th>
		</tr>
		
		<tr>
		<td align="center">1</td>
		<td align="center">2</td>
		<td align="center">3</td>
		<td align="center">4</td>
		</tr>
		
		<tr>
		<td align="center">5</td>
		<td align="center">6</td>
		<td align="center">7</td>
		<td align="center">8</td>
		</tr>

		<tr>
		<td align="center">9</td>
		<td align="center">10</td>
		<td align="center">11</td>
		<td align="center">12</td>
		</tr>
		
		<tr>
		<td align="center">13</td>
		<td align="center">14</td>
		<td align="center">15</td>
		<td align="center">16</td>
		</tr>
		
		<tr>
		<td align="center">17</td>
		<td align="center">18</td>
		<td align="center">19</td>
		<td align="center">20</td>
		</tr>
	</table>
	
</body>
</html>

Was This Post Helpful? 1

#7 Amrykid

4+1=Moo

Reputation: 146

Posts: 1,567
Joined: 16-December 08

Re: Week # 17 Challenge: CSS 3.0

Posted 27 April 2010 - 07:44 PM

I couldn't edit my guest post from earlier. Since then, I've added some jquery effects to my website (as shown below).
[attachment=17937:ie9_site_preview.png]

Was This Post Helpful? 0

#8 Nykc

Gentleman of Leisure

Reputation: 701

Posts: 8,577
Joined: 14-September 07

Re: Week # 17 Challenge: CSS 3.0

Posted 28 April 2010 - 12:23 PM

Just an example of faded borders in Firefox.
(Currently this example only works in Mozilla/Firefox)

moz-faded-borders.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>CSS3 - Mozilla/Firefox Faded Borders</title>
		<style type="text/css">
			/* ============== CSS3 Mozilla/Firefox Faded Border Test ============== */
			
			/* Begin CSS3 Browser Border Code */
			.red-faded-border { 
				width: 500px;
				text-align: center;
				border: 7px solid #550000; 
				-moz-border-bottom-colors: #660000 #770000 #880000 #990000 #AA0000 #BB0000 #CC0000 #DD0000 #FF3300;
				-moz-border-top-colors: #660000 #770000 #880000 #990000 #AA0000 #BB0000 #CC0000 #DD0000 #FF3300;
				-moz-border-left-colors: #660000 #770000 #880000 #990000 #AA0000 #BB0000 #CC0000 #DD0000 #FF3300;
				-moz-border-right-colors: #660000 #770000 #880000 #990000 #AA0000 #BB0000 #CC0000 #DD0000 #FF3300;
			}
			.green-faded-border { 
				width: 500px;
				text-align: center;
				border: 7px solid #005500; 
				-moz-border-bottom-colors: #006600 #007700 #008800 #009900 #00AA00 #00BB00 #00CC00 #00DD00 #00FF33;
				-moz-border-top-colors: #006600 #007700 #008800 #009900 #00AA00 #00BB00 #00CC00 #00DD00 #00FF33;
				-moz-border-left-colors: #006600 #007700 #008800 #009900 #00AA00 #00BB00 #00CC00 #00DD00 #00FF33;
				-moz-border-right-colors: #006600 #007700 #008800 #009900 #00AA00 #00BB00 #00CC00 #00DD00 #00FF33;
			}
			.blue-faded-border { 
				width: 500px;
				text-align: center;
				border: 7px solid #000055; 
				-moz-border-bottom-colors: #000066 #000077 #000088 #000099 #0000AA #0000BB #0000CC #0000DD #0033FF;
				-moz-border-top-colors: #000066 #000077 #000088 #000099 #0000AA #0000BB #0000CC #0000DD #0033FF;
				-moz-border-left-colors: #000066 #000077 #000088 #000099 #0000AA #0000BB #0000CC #0000DD #0033FF;
				-moz-border-right-colors: #000066 #000077 #000088 #000099 #0000AA #0000BB #0000CC #0000DD #0033FF;
			}
		</style>
	</head>
	<body>
		<div>
			<p class="red-faded-border">
				Mozilla/Firefox users should see a red faded border box.
			</p>
			<p class="green-faded-border">
				Mozilla/Firefox users should see a green faded border box.
			</p>
			<p class="blue-faded-border">
				Mozilla/Firefox users should see a blue faded border box.
			</p>
		</div>
	</body>
</html>

Was This Post Helpful? 1

#9 kaktusas2598

New D.I.C Head

Reputation: 0

Posts: 1
Joined: 02-May 10

Re: Week # 17 Challenge: CSS 3.0

Posted 03 May 2010 - 04:45 AM

Anybody know what challenge will come next?

Was This Post Helpful? 0

#10 programble

(cons :dic :head)

Reputation: 49

Posts: 1,315
Joined: 21-February 09

Re: Week # 17 Challenge: CSS 3.0

Posted 03 May 2010 - 12:54 PM

VB.NET

Was This Post Helpful? 0

Page 1 of 1

Week # 17 Challenge: CSS 3.0

9 Replies - 7811 Views - Last Post: 03 May 2010 - 12:54 PM

#1 SixOfEleven

Week # 17 Challenge: CSS 3.0

Replies To: Week # 17 Challenge: CSS 3.0

#2 SwiftStriker00

Re: Week # 17 Challenge: CSS 3.0

#3 Guest_Amrykid*

Re: Week # 17 Challenge: CSS 3.0

#4 Shane Hudson

Re: Week # 17 Challenge: CSS 3.0

#5 Nykc

Re: Week # 17 Challenge: CSS 3.0

#6 aniri

Re: Week # 17 Challenge: CSS 3.0

#7 Amrykid

Re: Week # 17 Challenge: CSS 3.0

#8 Nykc

Re: Week # 17 Challenge: CSS 3.0

#9 kaktusas2598

Re: Week # 17 Challenge: CSS 3.0

#10 programble

Re: Week # 17 Challenge: CSS 3.0

General Discussion

Programming Help

Web Development

Follow & Share

Give It A Try!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing