CSE-Kids

I’ve seen a few website examples recently (like  this one ) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned  redesign  of  CVW  Web Design . Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work. Firstly, here’s my  demo page  with a  <div>  content area and a transparent border that allows the background cork board pattern to show through. The border transparency is achieved using the  rgba property  which allows you to specific three rgb color values and a value for alpha (transparency). In my demo  CSS , I’ve set the border property values like this: div { border: 10px solid rgb(100, 100, 100); /* default color */ border: 10px solid rgba(0, 0, 0, 0.3); /* rgba for transparency */ } In this case I set a default grey color for browsers without rgba support and follow that

I was browsing a few websites the other day when I came across  Stunning CSS3 which promotes a forthcoming book by  Zoe Mickley Gillenwater . There are lots of CSS3 properties used on the site but one that caught my eye was the circular ‘Fall 2010’ item near the top of the page. Here, the  border-radius property  is used to create the circular shape. I have only used border-radius with  small  radii values before now but larger values allow you to make a circle. Here’s a short code snippet to achieve this effect. It’s not exactly the same as the above because there’s more  CSS  used in the  Stunning CSS3  site but this is the basics. This  HTML <div class="example1"> <p>This text is in a circle.</p> </div> … with this  CSS div.example1 { background: #69F; width: 10em; height: 10em; -moz-border-radius: 5em; -webkit-border-radius: 5em; border-radius: 5em; } .example1 p { padding: 2em 2em 0 2em; } … will give a nice circle lik

The  CSS3 box-shadow property  is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary  -moz-  and  -webkit-  prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely  essential but where it provides a nice style enhancement (enrichment) for modern browsers. Box-shadow basics First, a quick introduction and explanation. The box-shadow property takes several attributes/values, like any other  CSS  property, and these are are specified in order as follows: Horizontal offset of the shadow: a positive value for shadows on the ri

Some basic definitions to start… Before we get into using multiple classes, here are a few basic definitions. HTML Elements HTML Elements are the basic components that are used to create the structure of an HTML document. HTML elements generally consist of three parts: a start tag, content and an end tag. For example: <p> This is a paragraph. </p> HTML Attributes HTML Attributes are used to assign additional properties to HTML elements. For example: <p class="intro" > This is a paragraph. </p> CSS Selectors CSS Selectors are a component of CSS rule sets. They are used to "select" the elements on an HTML page that is to be styled. For example: .intro { color: red; } Multiple classes within one attribute It is possible to add more than one class to an HTML element. For example, you can add two classes to an  <li>  element like this: <li class=" page-1 current-page "><a href="#">

URL:  http://www.adamcoulombe.info/lab/jquery/select-box/ NOTE: THIS HAS BEEN MOVED TO GITHUB: If you have any ideas or improvements for this script feel free to fork or contribute or discuss over there: https://github.com/adamcoulombe/jquery.customSelect Plugin Download: http://www.adamcoulombe.info/lab/jquery/select-box/customSelect.jquery.js. ...............Demo: http://www.adamcoulombe.info/lab/jquery/select-box/ ...............This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable SPAN element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. Highlighted Text Expand

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques. 1. Custom Styled Radio Buttons and Checkboxes It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them: Custom Designed Checkbox and Radio Buttons Radio Button and Checkbox replacement. 2. Setting Equal Heights with jQuery Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the  equalHeights plugin . With this plugin, you can make e