Browsing all articles in CSS
Mar
1
0

Box Shadow Inset on Input Field? Yes, please!

Author Chris Cummings    Category CSS     Tags

Can you put a CSS3 box shadow on an input field?  You can!  The only thing you have to do is to set a background color or transparent to the field:

http://stackoverflow.com/questions/12140961/inset-box-shadow-for-inputfield

Buh-bam!

 

Nov
6
0

A Good Way To Deal With Padding

Author Chris Cummings    Category CSS     Tags

This is probably old hat to most but I just saw this and didn’t realize it was in CSS(3) so here we go:

*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

This little tidbit here will enable you to pad things without doing “padding math”. In other words it pads things on the INSIDE of a box, not added to.

That’s it. Short’n'sweet.

Feb
24
0

It’s the little things

Author Chris Cummings    Category CSS, Web Design     Tags

Sometimes those little touches can give you a nice feel to your site.  Here’s one…add this code to the top of your CSS:

* {  -webkit-transition: all 0.2s ease;  -moz-transition:    all 0.2s ease;  -ms-transition:     all 0.2s ease;  -o-transition:      all 0.2s ease;}

Wherever you have hovers and similar things, it will transition between the 2 states. Try it out!

The idea for this came from one of my favorite sites, CSS Tricks. Article is here: http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/

Jul
15
0

Cool moving background with CSS3

Author admin    Category CSS, HTML     Tags

I saw a cool thing on www.css-tricks.com (one of my favorite sites) and after looking at his code plus a few others was able to doit…so I present:
COOL SLIDE IN BACKGROUND (not the best name but, whattyagonnado?)

Here’s the code…all you need is a png file named droid.png:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#thebox {	
-webkit-border-radius: 14px;	
-moz-border-radius: 14px;	
border-radius: 14px;	
background-color: #10365b;	
height: 300px;	width: 400px;	
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	
color: #FFF;	font-size: 30px;	
background-image: url(droid.png);	
background-position: 390px 0px;	background-repeat:no-repeat;	
overflow: hidden;}#thebox p {	padding-top: 16px;	
padding-right: 150px;	
padding-bottom: 16px;	
padding-left: 16px;}#thebox:hover  {		
position: absolute;	
background-color: #30567b;	
background-image: url(droid.png);	
background-position: 190px 0px;	background-repeat:no-repeat;			
-webkit-transition: all 0.8s ease; 	
-moz-transition: all 0.8s ease; 	
background-position: 220px 100%; 	
background-repeat: no-repeat;	}
</style></head>
<body>	<div id="thebox">	  
<p>This is a cool box with some text in it </p>	  
<p>OK, that's all.</p>	
</div>
</body></html>
Jul
1
0

Super Helpful Nerdy Web Design Type Links

Author Chris Cummings    Category CSS, HTML, Javascript, jQuery, Web Design     Tags

I love CSS-TRICKS.COM.  Always interesting, usually helpful…but today its MEGA HELPFUL!  This post in particular:

http://css-tricks.com/12389-one-page-apps-i-actually-use/

Why?  Because I’m always looking up the code for rounded corners or trying to find the exact link to jQuery…here are some great links from that article!

That’s it.  Have fun. :-)

May
4
0

CSS3: The Wonder Years

Author admin    Category CSS, Internet Explorer, Javascript, Web Design     Tags

If you build websites, CSS3 is slap-awesome.  Rounded corners, gradients, transparencies, drop shadows…oh my!

As we know though the good ol’ “red headed step child yet still mamas favorite”, Internet Explorer doesn’t do these things.  Well, correction, IE9, which has recently dropped, does do some of the cool new stuff.  But as of right now a lot of IE users are still on 7 or 8…some even on 6 (Egads!)

If you are building with IE in mind and want all those cool roundy boxes and droppy shadows, here are a couple of links that will help you  get those on IE:

http://css3pie.com/

http://www.modernizr.com/