Código de CSS - Como crear una viñeta o bocadillo con css

Imágen de perfil

Como crear una viñeta o bocadillo con cssgráfica de visualizaciones


CSS

Publicado el 27 de Agosto del 2013 por Xavi
4.650 visualizaciones desde el 27 de Agosto del 2013. Una media de 28 por semana
Código que muestra como crear una flecha al estilo de viñeta o bocadillo utilizando únicamente css

Versión 1

Publicado el 27 de Agosto del 2013gráfica de visualizaciones de la versión: Versión 1
4.651 visualizaciones desde el 27 de Agosto del 2013. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver el ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Como crear una viñeta o bocadillo con css</title>
 
    <style>
    ul {
        margin:0px;
        padding:0px;
        list-style:none;
    }
 
    li {
        clear:both;
        overflow:hidden;
        margin-bottom:20px;
        width:100%;
    }
 
    .user {
        float:left;
        width:100px;
        margin:0;
    }
 
    .user figcaption {
        text-align:center;
    }
 
    .description {
        position:relative;
        /*
        Esta separación a la izquierda, es el ancho de la imagen del usuario mas
        el espacio que utilizaremos para la fecha con css
        */
        margin:0 0 0 130px;
        padding:10px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        min-height:30px;
        background-color:#ccc;
    }
 
    /* 
    Aqui definimos la clase arrowLeft, que contendra la flecha en la
    izquierda.
    De esta manera, podemos crear la clase arrowDerecha, arrowTop y arrowLeft
    para utilizar donde nos convenga
    */
    .arrowLeft::after {
        position:absolute;
        left:-20px;
        top:15px;
        content:"\00a0";
        display:block;
        width:0px;
        height:0px;
        border-width:10px 20px 10px 0px;
        border-style:solid;
        border-color:transparent #ccc transparent transparent;
    }
 
    .description p {
        padding:0px;
        margin:0px;
    }
    </style>
</head>
 
<body>
<h1>Como crear una viñeta o bocadillo con css</h1>
<ul>
    <li class="wrapper">
        <!--imagen del usuario del usuario-->
        <figure class="user">
            <img src="" width="100" height="100">
            <figcaption>usuario1</figcaption>
        </figure>
        <blockquote class="description arrowLeft">
            <!--informacion del usuario-->
            <p>Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción</p>
        </blockquote>
    </li>
    <li class="wrapper">
        <figure class="user">
            <img src="" width="100" height="100">
            <figcaption>usuario2</figcaption>
        </figure>
        <blockquote class="description arrowLeft">
            <p>Aqui va la descripción</p>
        </blockquote>
    </li>
</ul>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2469