i can code! for Web.: CSS3

Showing posts with label CSS3. Show all posts

Sunday, September 25, 2011

Targeting screen sizes by using media queries

In this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise).

desktop.css

body {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}

mobile.css

body {
 font-size: 10px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 { font-style: italic; }

dualcss.html

<html>
<head>
 <title>i can code! for Web: Dual CSS</title>
 
 <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" />
 <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
 
</head>
<body>
 <h1>i can code! for Web: Dual CSS</h1>
 <p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p>
</body>
</html>

Friday, June 3, 2011

HTML5/CSS3: Color with transparency, or opacity

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png");
}

.hsla_270_100_10_50 {
 color:hsla(270, 100%, 10%, 0.5);
}
.hsla_270_100_50_50 {
 color:hsla(270, 100%, 50%, 0.5);
}

.hsl_270_100_10 {
 color:hsl(270, 100%, 10%);
}
.hsl_270_100_50 {
 color:hsl(270, 100%, 50%);
}

.rgb_255_0_0{
 color:rgb(255, 0, 0);
}

.rgba_255_0_0_50{
 color:rgba(255, 0, 0, 0.5);
}

</style>
<meta charset="UTF-8">
<title>HTML5/CSS3: Color with transparency, or opacity</title>
</head>
<body>
<h1 class="hsl_270_100_10">color:hsl(270, 100%, 10%);</h1><h1 class="hsla_270_100_10_50">color:hsla(270, 100%, 10%, 0.5);</h1>
<h1 class="hsl_270_100_50">color:hsl(270, 100%, 50%);</h1><h1 class="hsla_270_100_50_50">color:hsla(270, 100%, 50%, 0.5);</h1>
<h1 class="rgb_255_0_0">color:rgb(255, 0, 0);</h1><h1 class="rgba_255_0_0_50">color:rgba(255, 0, 0, 0.5);</h1>

</body>
</html>

HTML5/CSS3: Color with transparency, or opacity

CSS3 color using hsl

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hsl_0_100_10 {
 color:hsl(0, 100%, 10%);
}
.hsl_0_100_50 {
 color:hsl(0, 100%, 50%);
}
.hsl_0_100_90 {
 color:hsl(0, 100%, 90%);
}

.hsl_90_100_10 {
 color:hsl(90, 100%, 10%);
}
.hsl_90_100_50 {
 color:hsl(90, 100%, 50%);
}
.hsl_90_100_90 {
 color:hsl(90, 100%, 90%);
}

.hsl_180_100_10 {
 color:hsl(180, 100%, 10%);
}
.hsl_180_100_50 {
 color:hsl(180, 100%, 50%);
}
.hsl_180_100_90 {
 color:hsl(180, 100%, 90%);
}

.hsl_270_100_10 {
 color:hsl(270, 100%, 10%);
}
.hsl_270_100_50 {
 color:hsl(270, 100%, 50%);
}
..hsl_270_100_90 {
 color:hsl(270, 100%, 90%);
}
</style>
<meta charset="UTF-8">
<title>CSS Color using hsl</title>
</head>
<body>
<p class="hsl_0_100_10">color:hsl(0, 100%, 10%);</p>
<p class="hsl_0_100_50">color:hsl(0, 100%, 50%);</p>
<p class="hsl_0_100_90">color:hsl(0, 100%, 90%);</p>

<p class="hsl_90_100_10">color:hsl(90, 100%, 10%);</p>
<p class="hsl_90_100_50">color:hsl(90, 100%, 50%);</p>
<p class="hsl_90_100_90">color:hsl(90, 100%, 90%);</p>

<p class="hsl_180_100_10">color:hsl(180, 100%, 10%);</p>
<p class="hsl_180_100_50">color:hsl(180, 100%, 50%);</p>
<p class="hsl_180_100_90">color:hsl(180, 100%, 90%);</p>

<p class="hsl_270_100_10">color:hsl(270, 100%, 10%);</p>
<p class="hsl_270_100_50">color:hsl(270, 100%, 50%);</p>
<p class="hsl_270_100_90">color:hsl(270, 100%, 90%);</p>

</body>
</html>

Using simple color in CSS3

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
 background-color:rgb(33.3%,33.3%,33.3%);
}
h1 {
 background-color:rgb(45%,45%,45%);
 color:rgb(100%,100%,100%);
}
</style>
<meta charset="UTF-8">
<title>CSS Color</title>
</head>
<body>
<h1>CSS Color</h1>
http://icancode-4-web.blogspot.com/

</body>
</html>