Aprenda Como é Feito:..."Dobrado efeito de canto com CSS"

fonte e créditos:

Efecto esquina doblada con CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Nicolas Gallagher nos muestra la forma de crear un efecto esquina doblada con CSS, la forma de crearlo es muy sencilla, en una entrada o gadger de HTML incluimos lo siguiente.
<div class="note"><p>Texto</p></div>
En plantilla edición de HTML añadimos los estilos justo antes de ]]></b:skin> el resto trata de sustituir el color de fondo si se desea para ello está indicado el lugar en el mismo código así como el ancho, el color de la esquina y borde.
.note {
    background: none repeat scroll 0 0 #97C02F; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #658E15; /* color esquina */
    border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
<div class="note blue"><p>Texto</p></div>
.note.blue {
    background: none repeat scroll 0 0 #53A3B4; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note.blue:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #658E15; /* color de fondo */
    border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de esquina */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
<div class="note taupe"><p>Texto</p></div>

.note.taupe {
    background: none repeat scroll 0 0 #999868; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note.taupe:before {
    background: none repeat scroll 0 0 #BDBB8B; /* color de esquina */
    border-color: #FFFFFF #FFFFFF #BDBB8B #BDBB8B; /* color de borde */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
Si queremos darle nuestro toque especial podemos añadir en lugar de color de fondo una textura con background: url(url-imagen) repeat scroll 0 0;
En su interior también podemos añadir alguna imagen con <img src="url-de-la-imagen"> 

La altura se irá adaptando a lo incluido en el contenido y la anchura a la establecida en width.

El tamaño de la esquina también lo podemos aumentar en: border-width: 0 16px 16px 0;

Añadimos sombra al texto con text-shadow: 1px 1px 1px #000;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
.note-fondo {
   background: url(url-imagen) repeat scroll 0 0 #3A7F2A;  
    color: #FFFFFF; /* color de texto */
text-shadow: 1px 1px 1px #000;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note-fondo:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
 -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #ADF96E; /* color esquina */
    border-color: #FFFFFF #FFFFFF #ADF96E #ADF96E; /* color de borde */
    border-style: solid;
    border-width: 0 36px 36px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

fonte e créditos:

traduzido:

Dobrado efeito de canto com CSS

Lorem ipsum dolor sit amet, elit adipiscing consectetur. Mauris rhoncus risus pulvinar, sagittis Ornare vel lacus amet sentar. Duis SEM magna vel. pulvinar Proin ligula velit ultrices eleifend vestíbulo. Mauris eu Nunc feugiat dor dignissim posuere.
"   Nicolas Gallagher mostra como criar um efeito de canto dobrado com CSS, como criá-lo é muito simples, em uma entrada ou HTML Gadge incluem o seguinte."
 
<div class="note"> <p> Texto </ p> </ div>
 
 
No modelo de edição de HTML estilos acrescentou, pouco antes ]]></ B: skin>  
 
o resto é para substituir a cor de fundo se desejar para isso é indicada sempre que o mesmo código, bem como a largura, cor e canto da borda.
 
 
. Nota {
    background: none repeat scroll 0 0 # 97C02F / * cor de fundo /
    color: # FFFFFF; / * cor do texto /
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px / * largura * /
}
. Nota: antes de {
    -Moz-box-shadow: 0 1px 1px RGBA (0, 0, 0, 0,3), "1px 1px 1px RGBA (0, 0, 0, 0,2);
    background: none repeat scroll 0 0 # 658E15; / * canto / cor
    border-color: # FFFFFF # FFFFFF # 658E15 # 658E15; / * cor da borda /
    border-style: solid;
    border-width: 0 16px 16px 0;
    conteúdo: "";
    display: block;
    position: absolute;
    direita: 0;
    top: 0;
    width: 0;
}
Lorem ipsum dolor sit amet, elit adipiscing consectetur. Mauris rhoncus risus pulvinar, sagittis Ornare vel lacus amet sentar. Duis SEM magna vel. pulvinar Proin ligula velit ultrices eleifend vestíbulo. Mauris eu Nunc feugiat dor dignissim posuere.
<div class="note BLUE"> <p> Texto </ p> </ div>
. Note.blue {
    background: none repeat scroll 0 0 # 53A3B4 / * cor de fundo /
    color: # FFFFFF; / * cor do texto /
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px / * largura * /
}
. Note.blue: antes {
    -Moz-box-shadow: 0 1px 1px RGBA (0, 0, 0, 0,3), "1px 1px 1px RGBA (0, 0, 0, 0,2);
    background: none repeat scroll 0 0 # 658E15; / * cor de fundo /
    border-color: # FFFFFF # FFFFFF # 658E15 # 658E15; / * cor canto /
    border-style: solid;
    border-width: 0 16px 16px 0;
    conteúdo: "";
    display: block;
    position: absolute;
    direita: 0;
    top: 0;
    width: 0;
}
Lorem ipsum dolor sit amet, elit adipiscing consectetur. Mauris rhoncus risus pulvinar, sagittis Ornare vel lacus amet sentar. Duis SEM magna vel. pulvinar Proin ligula velit ultrices eleifend vestíbulo. Mauris eu Nunc feugiat dor dignissim posuere.
<div class="note taupe"> <p> Texto </ p> </ div>

. Note.taupe {
    background: none repeat scroll 0 0 # 999 868 / * cor de fundo /
    color: # FFFFFF; / * cor do texto /
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px / * largura * /
}
. Note.taupe: antes {
    background: none repeat scroll 0 0 # BDBB8B, / * cor do canto /
    border-color: # FFFFFF FFFFFF # # # BDBB8B BDBB8B / * cor da borda /
    border-style: solid;
    border-width: 0 16px 16px 0;
    conteúdo: "";
    display: block;
    position: absolute;
    direita: 0;
    top: 0;
    width: 0;
}
 
Se dermos o nosso toque especial, podemos acrescentar a cor do fundo, em vez de um fundo de textura: url (url da imagem) repeat scroll 0 0;
Dentro de você também pode adicionar uma imagem com <img src="url-de-la-imagen">

A altura vai se adaptar ao que está incluído no conteúdo e na amplitude que a largura fixa.

O tamanho do canto para que possamos melhorar em: border-width: 0 16px 16px 0;

Adicionar sombra ao texto com sombra texto: 1px 1px 1px # 000;
Lorem ipsum dolor sit amet, elit adipiscing consectetur. Mauris rhoncus risus pulvinar, sagittis Ornare vel lacus amet sentar. Duis SEM magna vel. pulvinar Proin ligula velit ultrices eleifend vestíbulo. Mauris eu Nunc feugiat dor dignissim posuere.
. Nota inferior {
   background: url repetição (url da imagem) de rolagem 0 0 # 3A7F2A;
    color: # FFFFFF; / * cor do texto /
text-shadow: 1px 1px 1px # 000;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px / * largura * /
}
. Note-bottom: antes {
    -Moz-box-shadow: 0 1px 1px RGBA (0, 0, 0, 0,3), "1px 1px 1px RGBA (0, 0, 0, 0,2);
    background: none repeat scroll 0 0 # ADF96E, / * canto / cor
    border-color: # FFFFFF FFFFFF # # # ADF96E ADF96E / * cor da borda /
    border-style: solid;
    border-width: 0 36px 36px 0;
    conteúdo: "";
    display: block;
    position: absolute;
    direita: 0;
    top: 0;
    width: 0;
}

2 comentários:

donsergione disse... [Reply to comment]

caramba essa edilene é fera mesmo hein, você sabe como colo botões no menu categorias ?

22 de janeiro de 2011 07:08
edilene - amor disse... [Reply to comment]

donsergione,
sei sim!
depois pode me perguntar no formulario de contato aqui,
no indice/marcadores
ok
;)

22 de janeiro de 2011 15:24

Postar um comentário


Mensagem do formulário de comentário:

Pesquisar

Postagens populares

Follow by Email

Seguir este espaço...clique...na imagem:

Seguir este espaço...clique...na imagem: seguindo seguindo

Arquivo

 
|http://adicionado.blogspot.com/|