Mostrando postagens com marcador dobrado. Mostrar todas as postagens
Mostrando postagens com marcador dobrado. Mostrar todas as postagens

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;
}
Leia Mais

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/|