CSE-Kids

CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow.  Here are five ways that JavaScript and CSS work together that you may not know about! Get Pseudo-Element Properties with JavaScript We know that we can get basic CSS style values for an element with the  style  property, but what about pseudo-element properties?  Yes, JavaScript can even access those too! // Get the color value of .element:before var color = window . getComputedStyle ( document . querySelector ( '.element' ) , ':before' ) . getPropertyValue ( 'color' ) ; // Get the content value of .element:before var content = window . getComputedStyle ( document . querySelect

In this post, I’ll explain to you how to make the rounded corner textbox using a image and css. Text box is placed over a container element whose background image is the key of the rounded corner textbox. This is the image which I’ve used in my example, don’t click and start typing it just a image for now. Now let’s look at the html and css code to display rounded corner textbox. HTML Code for rounded corner textbox <div class = "loginboxdiv" >   <input class = "loginbox" name = "username" type = "text" / > </div> The container “div” contains the background image of rounded corners and inside of that the real textbox resides. CSS Code for rounded corner textbox: .loginboxdiv { margin:0; height:21px; width:146px; background:url(login_bg.gif) no-repeat bottom; } .loginbox { background:none; border:none; width:134px; height:15px; margin:0; padding: 2px 7px 0px 7px; font-family:Verdana, Arial, H

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="#">