1
Crear una etiqueta de encabezado o título. Por ejemplo, si usted quiere que su primera cabecera de la página para decir " Header ", su margen de ganancia aparecería como : " .
Header < /h1 > " Siempre cierre de una etiqueta HTML con un barra invertida.
2
Dar su etiqueta HTML los estilos CSS que desees . Incluya por lo menos, su posición, tamaño y color. Por ejemplo , haciendo referencia a la etiqueta
, el CSS margen se vería así :
h1 {position : absolute; anchura: 20 % ; padding : 10px ; background-color : # 999 ;}
Haga que cada línea de CSS margen de una línea independiente. Comience y termine cada declaración con soportes abiertos y cerrados. " position: absolute ", la posición del elemento es absoluto y no cambia no importa lo que está sucediendo en la página. El ancho se establece en el 20 por ciento de la pantalla o la caja la etiqueta h1 se establece dentro de , por ejemplo un " div " o " mesa". El acolchado le da la etiqueta h1 un respiro adicional. El background-color establece el color de todo el texto.
3
Crear un triangular " después de" pseudo-elemento para añadir a su etiqueta de cabecera . El pseudo- elemento "después " es nueva en CSS3 y le permite colocar un elemento directamente después de otro. Que sea un triángulo mediante el establecimiento de más de una de sus fronteras a transparente. Su margen de beneficio después de su etiqueta
sería ahora el siguiente aspecto:
h1: después {position : absolute; izquierda : 0 ; superior : 100 % ; border-width : 10px 10px ; border-style : solid ; border-color : # 666 # 666 transparente transparente; }
la posición y el estilo de la izquierda establece el triángulo en la parte inferior izquierda del elemento h1 . Los mejores estilos y la frontera establecen el tamaño del triángulo . El estilo border-color hace que el bloque aparece como un triángulo y las fronteras que aparecen los colores son más oscuros que el color de la cabecera , creando un efecto 3D , como si el bloque de cabecera es fuertemente plegado hacia atrás como una cinta.
4
Añade más efectos con elementos triangulares para terminar la mirada de la cinta de la cabecera. Coloque estos últimos triángulos al inicio de la cabecera y al final , por lo que la cinta tiene un aspecto similar a la bandera . Su CSS mark-up aparece ahora en conjunto como :
h1 {position : absolute; anchura: 20 % ; padding : 10px ; background-color : # 999 ;}
h1: después de { position: absolute ; left: 0px ; superior : 100 % ; border-width : 10px 10px ; border-style : solid ; border-color : # 666 # 666 transparente transparente; }
h1: before { posición : absoluta ; derecha: 0px ; top: 0px ; border-color : transparent # fff transparente transparente; }
h1 : before { position: absolute ; izquierda :- 30px ; top: ; : 10px 20px 12px border-width ; border-color : # 999 # 999 # 999 transparente; }
la primera ": antes de " elemento crea una bandera de efecto en el lado derecho de la cabecera . La segunda ": antes." Elemento crea un estilo de la bandera en el lado izquierdo caído de la cabecera