Creating Different CSS3 Box Shadows Effects

In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.

View Demo page to see what we are going to create
CSS Box Shadow Effects Demo

Web Shadows Package

CSS Box Shadow

We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it.

The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset.

The box-shadow property accepts 2-4 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour.

box-shadow: horizontal vertical spread colour;

Examples

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Browser Support

All of the major newest browsers support box-shadow property.

  • Internet Explorer 9.0 and higher
  • Firefox 3.5 and higher
  • Chrome 1 and higher
  • Safari 3 and higher
  • Opera 10.5 and higher

With many new CSS3 properties you need to prefix the property with browser specific tags.

For firefox you need to use -moz-, for chrome/safari you need to use -webkit.

The box-shadow property is no different.

For Firefox 3.5 you need to prefix with -moz-boz-shadow, but for Firefox 4.0 and higher you don’t need to use the prefix anymore.

For Chrome/safari you still need to use the -webkit-box-shadow.

For opera you don’t need to prefix the property and can just use box-shadow.

CSS Box Shadow Effect 1

CSS Box Shadow Effects1

This will create a standard box shadow effect with the shadow moved into the element to create a raised box look.

The HTML

<div>
<h3>Effect 1</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

CSS Box Shadow Effect 2

CSS Box Shadow Effects2

This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.

The HTML

<div>
<h3>Effect 2</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

CSS Box Shadow Effect 3

CSS Box Shadow Effects3

This uses half of the effect approve and will add a lifted corner to the bottom left of the box.

The HTML

<div>
<h3>Effect 3</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

CSS Box Shadow Effect 4

CSS Box Shadow Effects4

Effect 4 will lift the corner on the bottom right of the box.

The HTML

<div>
<h3>Effect 4</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

CSS Box Shadow Effect 5

CSS Box Shadow Effects5

This is expands on the effect 2 and will increase the angle of the shadows.

The HTML

<div>
<h3>Effect 5</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

CSS Box Shadow Effect 6

CSS Box Shadow Effects6

This effect will create a curved shadow at the bottom of the box.

The HTML

<div>
<h3>Effect 6</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

CSS Box Shadow Effect 7

CSS Box Shadow Effects7

This effect uses the previous effect and adds another shadow to the top of the box.

The HTML

<div>
<h3>Effect 7</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

CSS Box Shadow Effect 8

CSS Box Shadow Effects8

The final effect will add rounded shadows to either side of the box.

The HTML

<div>
<h3>Effect 8</h3>
</div>

The CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Demo Page

View the demo page to see all these effects.

Fonte: paulund.co.uk

Create Really Detailed Dark Web Layout Using Photoshop

Hello! Today I’m gonna teach you how to create a dark template, I tried to explain everything as detailed as I could, but let me know if you didn’t get something right. This is my very first time on writing a tutorial and I am very excited about this chance.

I will do my best to make this tutorial easy for you to follow, just follow screenshots as we move forward step by step and try to understand how to use these techniques in your own designs! Let’s start?

da:

Create Really Detailed Dark Web Layout Using Photoshop.

By Michael Burns

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

Navigation menus and buttons with CSS styling are being used in almost every website. There are a lot of techniques to utilize and a good developer should have some basic knowledge about them all.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

vedi: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials.

Compass Datagrid | jQuery Table | Technical Resources

Compass DataGrid is an ajax-driven data grid that relies on server-side code for its data. Rather than manipulating an existing table or breaking it down into multiple pages, Compass DataGrid takes an empty table and populates it by connecting to a server-side url via ajax. As users interact with the grid, the grid talks with the server-side script letting it know what the user is requesting. The server-side script then provides JSON encoded data for the plugin to update the table.

Compass Datagrid will work with any server-side programming language. However, the example in the download is in PHP.

Update 11/11/09 9:52AM PST

Due to renaming the function, the demo.html included in the original download was not working. The zip file has been updated and should now work. Just be sure to test on a server with PHP enabled.

Skip to Download »

Continue reading

Identify A Font With “What Font Is”

What Font Is is a free web-based service that helps identifying and/or finding alternatives of a font.

It works by simply uploading (or mentioning the URL of) an image including the text.

The service offers the option to include only free and/or commercial fonts in the results.

And, you can browse a gallery of 70,000+ fonts inside the “All Fonts” menu.

What  Font Is

WebResourcesDepot Feed

Identify A Font With “What Font Is”.

Test Websites On Multiple Browsers: BrowserLab

BrowserLab, a web-based service by Adobe, enables you to test websites on multiple browsers and OSs.

It is possible to create a custom browser set where the screenshots will be created only for those browsers (also helps speeding up the results).

Adobe Browserlab

Screenshots can be previewed in 2-up or onion-skin views which makes comparing multiple versions easier and x/y rulers can be used for sensitive measurements..

The service currently supports different Firefox, Safari and IE versions for Windows and Mac OS X. However, it is still in beta and new browsers are added within time.

BrowserLab is part of the Adobe CS Live and free for 1 year if you sign-up before April 30, 2011.

Test Websites On Multiple Browsers: BrowserLab.

Open Source Web File Manager: KCFinder

KCFinder is an open source and web-based file manager, built with PHP, that is inspired from the popular CKFinder.

It has a completely Ajaxed interface and can be integrated easily with other applications like FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or anything custom).

KCFinder - Web File Manager

The file manager has a context menu when right-clicked on any item that shows options like rename, delete, download, etc.

It has a clipboard functionality for copying and moving files, images can be auto-resized to a pre-defined width-height when they are uplaoded.

Also, KCFinder has a multilanguage interface which can be customized with CSS.

Open Source Web File Manager: KCFinder.

How to watermark all your uploaded images | WP Glamour

How to watermark all your uploaded images

How many of you wanted to place a watermark on all of your images?

Let&apos;s say you are just starting your own blog and the first solution that comes to mind is to fire up Adobe Photoshop or any other image editing program and place a watermark on all your images. It is time consuming but it will work.

But what if you have a blog for a really long time and you just decided you want to watermark all your images? You would have to copy all your images from your blog to your computer, open all of them up and add a watermark. Not good.

But what about the original images? What if you ever need them without the watermark?

Here is my solution. I have been using this on a number of blogs and it does the job really well.

What we are going to do is fake the display of an image. What we are displaying instead of the image is a php file that processes the image and ads a watermark to it. The url of the image stays the same, the watermark gets printed on the image and best of all the image on the server doesn&apos;t stays intact.

All you need is a bit of code in your .htaccess file, a php watermark processing file and a watermark image (png preferably).

Da: How to watermark all your uploaded images | WP Glamour.

Tabelle dati in chiave moderna sul web

In questo post “Data Tables In Modern Web Design” si parla di tabelle e del loro utilizzo nella progettazione delle pagine web per presentare grandi quantità di informazioni in maniera strutturata e facilmente leggibile dal lettore. Nell’articolo vengono riportati diversi esempi di come è possibile utilizzare al meglio le tabelle, ad esempio nella comparazione di prodotti e servizi, degli elementi da utilizzare per migliorarne l’usabilità, i colori, la possibilità di interagire con righe e colonne etc…
Dopo la lettura dell’articolo, se volete provare anche voi a realizzare qualcosa del genere, magari possono tornare utili questi plugin jQuery.