Writings - random writings by Derek Sozou

Media CSS

CSS Media widths

@media screen and (max-width: 870px) {
/*CSS HERE*/
}

@media screen and (max-width: 870px) {

/*CSS HERE*/

}

Media Rule

@media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@media print {

body { font-size: 10pt }

}

@media screen {

body { font-size: 13px }

}

@media screen, print {

body { line-height: 1.2 }

}

all Suitable for all devices. braille Intended for braille tactile feedback devices. embossed Intended for paged braille printers. handheld Intended for handheld devices (typically small screen, limited bandwidth). print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on [...]

Accessible Web Forms

Accessible Forms

<form>
<fieldset> 
<legend><strong>Personal Details</strong></legend>
<label for="name">Name:</label> 
<input id="name" type="text" name="name" size="30" title="Your Name" />
</fieldset>

<fieldset> 
<legend><strong>Select the fact sheets you want</strong></legend>
<input id="roses" type="checkbox" title ="rose factsheet" name="roses" value="checkbox" /> 
<label for="roses">Roses</label> 
<input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" />
<label for="daffodils">Daffodils</label> 
<input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" /> 
<label for="tulips">Tulips</label>
</fieldset> 

<fieldset>
<legend><strong>Gender</strong></legend>
<input type="radio" id="male" name="gender" />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" />
<label for="female">Female</label>
</fieldset>

<fieldset>
<legend><strong>Favourite City</strong></legend>
<label for="favcity">Choose your favourite city?</label>
<select id="favcity" name="favcity">
<optgroup label="Asia">
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="8">Mumbai</option>
  <option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
  <option value="1">Amsterdam</option>
  <option value="5">London</option>
  <option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
  <option value="6">Los Angeles</option>
  <option value="9">New York</option>
</optgroup>
<optgroup label="South America">
  <option value="2">Buenos Aires</option>
  <option value="10">Sao Paulo</option>
</optgroup>
</select>
</fieldset>

<fieldset>
<legend><strong>Additional Comments</strong></legend>
<label for="comments">Comments</label><br />
<textarea id="comments" name="commenttext"></textarea>
</fieldset>
</form>

<form>

<legend><strong>Personal Details</strong></legend>

</fieldset>

<legend><strong>Select the fact sheets you want</strong></legend>

<label for="roses">Roses</label>

<label for="daffodils">Daffodils</label>

<label for="tulips">Tulips</label>

</fieldset>

<legend><strong>Gender</strong></legend>

<label for="female">Female</label>

</fieldset>

<legend><strong>Favourite City</strong></legend>

<label for="favcity">Choose your favourite city?</label>

<option value="3">Delhi</option>

<option value="8">Mumbai</option>

<option value="11">Tokyo</option>

</optgroup>

<option value="1">Amsterdam</option>

<option value="5">London</option>

<option value="7">Moscow</option>

</optgroup>

<option value="6">Los Angeles</option>

</optgroup>

<option value="2">Buenos Aires</option>

<option value="10">Sao Paulo</option>

</optgroup>

</select>

</fieldset>

<legend><strong>Additional Comments</strong></legend>

<label for="comments">Comments</label><br />

</fieldset>

</form>

HTML5 INPUT TYPES EMAIL http://www.w3.org/TR/html-markup/input.email.html E-mail RANGE http://www.w3.org/TR/html-markup/input.range.html Points URL http://www.w3.org/TR/html-markup/input.url.html Add URL PASSWORD Password SEARCH http://www.w3.org/TR/html-markup/input.search.html Search

Validate Date with Regex

Using Regex to validate Date field

<script type="text/javascript">
    function isValidDate(sText) {
        var regexDate = /(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/;
        return regexDate.test(sText);
    }
    function validate() {
        var inputDate = document.getElementById('dateInput');
        if (isValidDate(inputDate.value)) {
            document.getElementById('dateResult').innerHTML = "Validated"
            document.getElementById('dateResult').style.color ='green'
           // alert("Valid");
        } else {
            document.getElementById('dateResult').innerHTML = "Invalid"
            document.getElementById('dateResult').style.color ='red'
          //  alert("Invalid!");
        }

    }
</script>

function isValidDate(sText) {

var regexDate = /(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/;

return regexDate.test(sText);

}

function validate() {

var inputDate = document.getElementById('dateInput');

if (isValidDate(inputDate.value)) {

document.getElementById('dateResult').innerHTML = "Validated"

document.getElementById('dateResult').style.color ='green'

// alert("Valid");

} else {

document.getElementById('dateResult').innerHTML = "Invalid"

document.getElementById('dateResult').style.color ='red'

// alert("Invalid!");

}

</script>

<form method="get" action="" onsubmit="validate();return false">
    <ul>
        <li><label for="dateInput">Date:</label> <input type="text" id="dateInput" /><span id="dateResult"> </span><br /><small>example: DD/MM/YYYY</small></li>
        <li><input type="button" value="Validate" onclick="validate()" /></li>
    </ul>
</form>

<ul>

<li><label for="dateInput">Date:</label> <input type="text" id="dateInput" /><span id="dateResult"> </span><br /><small>example: DD/MM/YYYY</small></li>

</ul>

</form>

CSS3 Text Effects

NEON

#neon {padding: 50px; background: #000;}
#neon h1 {
text-align: center;
margin: 20px auto;
font-family: "Museo";
font-size: 100px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

#neon {padding: 50px; background: #000;}

#neon h1 {

text-align: center;

margin: 20px auto;

font-family: "Museo";

font-size: 100px;

text-transform: uppercase;

color: #fff;

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

}

VINTAGE

#vintage h1 {
text-align: center;
margin: 50px auto;
font-family: "League-Gothic", Courier;
font-size: 100px;
text-transform: uppercase;
color: #707070;
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}

#vintage h1 {

text-align: center;

margin: 50px auto;

font-family: "League-Gothic", Courier;

font-size: 100px;

text-transform: uppercase;

color: #707070;

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

}

INSET

#inset {
padding: 20px; background: #474747;
}
#inset h1 {
text-align: center;
margin: 50px auto;
font-family: "League-Gothic", Courier;
font-size: 100px;
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;
}

#inset {

padding: 20px; background: #474747;

}

#inset h1 {

text-align: center;

margin: 50px auto;

font-family: "League-Gothic", Courier;

font-size: 100px;

text-transform: uppercase;

color: #222;

text-shadow: 0px 2px 3px #666;

}

Anaglyphic

#anaglyphic {
padding: 20px;
background: #fff;
}
#anaglyphic h1 {
text-align: center;
margin: 50px auto;
font-family: "League-Gothic", Courier;
font-size: 100px;
text-transform: uppercase;
color: rgba(0,168,255,0.5);
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
}

#anaglyphic {

padding: 20px;

background: #fff;

}

#anaglyphic h1 {

text-align: center;

margin: 50px auto;

font-family: "League-Gothic", Courier;

font-size: 100px;

text-transform: uppercase;

color: rgba(0,168,255,0.5);

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

}

Fire

#fire {
padding: 50px;
background: #000;
}
#fire h1 {
text-align: center;
margin: 100px auto;
font-family: "League-Gothic", Courier;
font-size: 100px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

#fire {

padding: 50px;

background: #000;

}

#fire h1 {

text-align: center;

margin: 100px auto;

font-family: "League-Gothic", Courier;

font-size: 100px;

text-transform: uppercase;

color: #fff;

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

}

Shadow & Rotate

Shadow

#logo{
-moz-box-shadow: 5px 5px 5px #333;
-webkit-box-shadow: 5px 5px 5px #333;
-o-box-shadow: 5px 5px 5px #333;
box-shadow: 5px 5px 5px #333;
}

#logo{

-moz-box-shadow: 5px 5px 5px #333;

-webkit-box-shadow: 5px 5px 5px #333;

-o-box-shadow: 5px 5px 5px #333;

box-shadow: 5px 5px 5px #333;

}

Shadow Text

h1{text-shadow: 2px 2px 2px #bbbbbb; }

1	h1{text-shadow: 2px 2px 2px #bbbbbb; }

h1{filter: Shadow(Color=#bbbbbb,
Direction=135,
Strength=3);
}

h1{filter: Shadow(Color=#bbbbbb,

Direction=135,

Strength=3);

}

Rotate

#logo{
-moz-transform: rotate(-7.5deg);
-o-transform: rotate(-7.5deg);
-webkit-transform: rotate(-7.5deg);
-ms-transform: rotate(-7.5deg);
transform: rotate(-7.5deg);
}

#logo{

-moz-transform: rotate(-7.5deg);

-o-transform: rotate(-7.5deg);

-webkit-transform: rotate(-7.5deg);

-ms-transform: rotate(-7.5deg);

transform: rotate(-7.5deg);

}

Rounded Border

moz-border-radius: 12px;
webkit-border-radius: 12px;
o-border-radius: 12px;
border-radius: 12px;

moz-border-radius: 12px;

webkit-border-radius: 12px;

o-border-radius: 12px;

border-radius: 12px;

Transparent Background

background-color: rgba(255,255,255,0.95);

1	background-color: rgba(255,255,255,0.95);

HTML5

HTML5 Boilerplate 3.0 http://html5boilerplate.com/

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style.css">

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div role="main">

  </div>
  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->


  
</body>
</html>

<!doctype html>

<html class="no-js" lang="en">

<head>

<!-- Use the .htaccess and remove these lines to avoid edge case issues.

More info: h5bp.com/i/378 -->

<!-- All JavaScript at the bottom, except this Modernizr build.

Modernizr enables HTML5 elements & feature detects for optimal performance.

Create your own custom Modernizr build: www.modernizr.com/download/ -->

</head>

<body>

<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.

chromium.org/developers/how-tos/chrome-frame-getting-started -->

</header>

</div>

</footer>

</body>

</html>

Popups

<a href='holiday_pay.html'
onclick="window.open(this.href,WinName,'width=300,height=300);" >
New Window
</a>

<a href='holiday_pay.html'

onclick="window.open(this.href,WinName,'width=300,height=300);" >

New Window

</a>

<a href="help/holiday_pay.html"
data-width="600"
data-height="400"
title="Holiday Pay"
class="popup" >New Window</a>

<a href="help/holiday_pay.html"

data-width="600"

data-height="400"

title="Holiday Pay"

class="popup" >New Window</a>

$(function(){
$(".popup" ).click(function(event){
event.preventDefault();
var href = $(this).attr("href" );
var width = $(this).attr("data-width" );
var height = $(this).attr("data-height" );
var popup = window.open (href,"popup" ,
"height=" + height +",width=" + width + "" );
});
});

$(function(){

$(".popup" ).click(function(event){

event.preventDefault();

var href = $(this).attr("href" );

var width = $(this).attr("data-width" );

var height = $(this).attr("data-height" );

var popup = window.open (href,"popup" ,

"height=" + height +",width=" + width + "" );

});

Tables

<table >
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffee mug</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>$20.00</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Red stapler</td>
<td>$9.00</td>
<td>4</td>
<td>$36.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$186.00</td>
</tr>
<tr>
<td colspan="3">Shipping</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>


<style type="text/css">


table{
width: 600px;
border-collapse: collapse;
}
th, td{
border: none;
}
th{
background-color: #000;
color: #fff;
}
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#ddd;
}
td:nth-child(n+2){
text-align: right;
}

tr:last-child{
font-weight: bolder;
}
td:last-child{
font-weight: bolder;
}
tr:last-child td:last-child{
font-size:24px;
}
tr:nth-last-child(2){
color: green;
}
tr:nth-last-child(-n+3) td{
text-align: right;
}

</style>

<tr>

<th>Price</th>

<th>Quantity</th>

<th>Total</th>

</tr>

<tr>

<td>Coffee mug</td>

</tr>

<tr>

<td>Polo shirt</td>

</tr>

<tr>

<td>Red stapler</td>

</tr>

<tr>

<td colspan="3">Subtotal</td>

</tr>

<tr>

<td colspan="3">Shipping</td>

</tr>

<tr>

<td colspan="3">Total Due</td>

</tr>

</table>

table{

width: 600px;

border-collapse: collapse;

}

th, td{

border: none;

}

th{

background-color: #000;

color: #fff;

}

tr:nth-of-type(even){

background-color: #F3F3F3;

}

tr:nth-of-type(odd) {

background-color:#ddd;

}

td:nth-child(n+2){

text-align: right;

}

tr:last-child{

font-weight: bolder;

}

td:last-child{

font-weight: bolder;

}

tr:last-child td:last-child{

font-size:24px;

}

tr:nth-last-child(2){

color: green;

}

tr:nth-last-child(-n+3) td{

text-align: right;

}

</style>

Print Links

<a href="somewhere/index.html">Link to somewhere</a>

1	<a href="somewhere/index.html">Link to somewhere</a>

a:after {
content: " (" attr(href) ") ";
}

a:after {

content: " (" attr(href) ") ";

}

<link rel="stylesheet" href="print.css" type="text/css" media="print">

1	<link rel="stylesheet" href="print.css" type="text/css" media="print">

Mobile

@media only screen and (max-device-width: 480px) {
body{
width:460px;
}
section#sidebar, section#posts{
float: none;
width: 100%;
}
}

@media only screen and (max-device-width: 480px) {

body{

width:460px;

}

section#sidebar, section#posts{

float: none;

width: 100%;

}

Accessibility

<header id="page_header" role="banner">
<h1>AwesomeCo Blog!</h1>
</header>

<h1>AwesomeCo Blog!</h1>

</header>

<nav role="navigation">
<ul>
<li><a href="/">Latest Posts</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>

<ul>

<li><a href="/">Latest Posts</a></li>

<li><a href="/archives">Archives</a></li>

<li><a href="/contributors">Contributors</a></li>

<li><a href="/contact">Contact Us</a></li>

</ul>

</nav>

<section id="posts" role="main">
</section>

1 2	<section id="posts" role="main"> </section>

<section id="sidebar" role="complementary">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
<li><a href="2010/06">June 2010</a></li>
<li><a href="2010/05">May 2010</a></li>
<li><a href="2010/04">April 2010</a></li>
<li><a href="2010/03">March 2010</a></li>
<li><a href="2010/02">February 2010</a></li>
<li><a href="2010/01">January 2010</a></li>
</ul>
</nav>
</section>

<nav>

<h3>Archives</h3>

<ul>

<li><a href="2010/10">October 2010</a></li>

<li><a href="2010/09">September 2010</a></li>

<li><a href="2010/08">August 2010</a></li>

<li><a href="2010/04">April 2010</a></li>

<li><a href="2010/03">March 2010</a></li>

<li><a href="2010/02">February 2010</a></li>

<li><a href="2010/01">January 2010</a></li>

</ul>

</nav>

</section>

<footer id="page_footer" role="contentinfo">
<p>&copy; 2010 AwesomeCo.</p>
</footer>

</footer>

http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

rathervague random writings

random writings by Derek Sozou

Media CSS

Accessible Web Forms

Validate Date with Regex

CSS3 Text Effects

Shadow & Rotate

HTML5

Blank WP Page Template

Ink Drops

Twitter to RSS