7 Images Style em CSS3

Com CSS3 pode-se aplicar efeitos interessantes às imagens, sem a necessidade de as trabalhar num programa de edição de imagens, como o Photoshop.



Exemplo 1: Circle Style

Para copiar o código clicar no ícone abaixo

<div class="bg_image_round"></div>

Para copiar o código clicar no ícone abaixo

.bg_image_round {
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width: 300px;
height: 300px;
border-radius: 50%;
display: block;
}

Exemplo 2: Card style

Para copiar o código clicar no ícone abaixo

<div class="bg_image_card"></div>

Para copiar o código clicar no ícone abaixo

.bg_image_card {
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width: 300px;
height: 300px;
display: block;
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
border-radius: 30px;
}

Exemplo 3: Cutout Style

Para copiar o código clicar no ícone abaixo

<div class="bg_image_cutout"></div>

Para copiar o código clicar no ícone abaixo

.bg_image_cutout {
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width: 300px;
height: 300px;
display: block;
box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 8px 10px rgba(0,0,0,.8), inset 0 1px 0 rgba(0,0,0,.6);
border-radius: 20px;
}

Exemplo 4: Reflection Style

Para copiar o código clicar no ícone abaixo

<div class="bg_image_reflection">
    <span></span>
</div>

Para copiar o código clicar no ícone abaixo

.bg_image_reflection {
display: block;
width: 300px;
height: 300px;
position: relative;
}
.bg_image_reflection span {
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width: 300px;
height: 300px;
display: block;
border-radius: 20px;
}
.bg_image_reflection:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 60px;
  bottom: -61px;
  left: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
  background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
  -pie-background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);}

Exemplo 5: Embossed Style

Para copiar o código clicar no ícone abaixo

<div class="bg_image_embossed"></div>

Para copiar o código clicar no ícone abaixo

.bg_image_embossed {
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width: 300px;
height: 300px;
display: block;
border-radius: 20px;
box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -12px 2px rgba(0,0,0,.6), inset 0 -15px 2px rgba(255,255,255,.3);
}

Exemplo 6: Glossy Overlay

Para copiar o código clicar no ícone abaixo

<div class="bg_image_glossy">
        <span></span>
    </div>

Para copiar o código clicar no ícone abaixo

.bg_image_glossy{
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
border-radius: 30px;
display:block;
width:300px;
height:300px;
position:relative;
}
.bg_image_glossy span{
display:block;
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width:300px;
height:300px;
border-radius: 20px;
}
.bg_image_glossy:after{
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.7) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.7) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
  background: linear-gradient(top, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.7) 100%);
}

Exemplo 7: Morphing & Glowing

Para copiar o código clicar no ícone abaixo

<div class="bg_image_morphing_glowing"></div>

Para copiar o código clicar no ícone abaixo

.bg_image_morphing_glowing {
display:block;
background: url(https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/images/leon.jpg) 0 0 no-repeat;
width:300px;
height:300px;
border-radius: 20px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
.bg_image_morphing_glowing:hover {
  box-shadow: 0 0 10px rgba(0,0,0,.6), inset 0 0 50px rgba(0,0,0,1);
  -webkit-border-radius: 60em;
  -moz-border-radius: 60em;
  border-radius: 60em;
}