Herramientas de usuario
recursos:ficha
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
| recursos:ficha [2023/11/23 10:57] – creado thejuanvisu | recursos:ficha [2023/11/23 11:02] (actual) – thejuanvisu | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Fichas de RetroGamesHistory ====== | ====== Fichas de RetroGamesHistory ====== | ||
| <code html ficha.html> | <code html ficha.html> | ||
| + | |||
| + | |||
| + | <script src="// | ||
| + | |||
| + | < | ||
| + | | ||
| + | /*custom font*/ | ||
| + | @import url(https:// | ||
| + | |||
| + | * {margin: 0; padding: 0;} | ||
| + | |||
| + | |||
| + | |||
| + | .breadcrumb { | ||
| + | / | ||
| + | | ||
| + | display: inline-block; | ||
| + | / | ||
| + | overflow: hidden; | ||
| + | border-radius: | ||
| + | /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/ | ||
| + | counter-reset: | ||
| + | } | ||
| + | |||
| + | .breadcrumb a { | ||
| + | | ||
| + | text-decoration: | ||
| + | outline: none; | ||
| + | display: block; | ||
| + | float: left; | ||
| + | font-size: 11px; | ||
| + | line-height: | ||
| + | color: white; | ||
| + | /*need more margin on the left of links to accomodate the numbers*/ | ||
| + | padding: 0 10px 0 30px; | ||
| + | background: | ||
| + | background: | ||
| + | position: relative; | ||
| + | } | ||
| + | /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/ | ||
| + | .breadcrumb a: | ||
| + | padding-left: | ||
| + | border-radius: | ||
| + | } | ||
| + | .breadcrumb a: | ||
| + | left: 14px; | ||
| + | } | ||
| + | .breadcrumb a: | ||
| + | border-radius: | ||
| + | padding-right: | ||
| + | } | ||
| + | |||
| + | / | ||
| + | .breadcrumb a.active, .breadcrumb a:hover{ | ||
| + | background: | ||
| + | background: | ||
| + | } | ||
| + | .breadcrumb a.active: | ||
| + | background: | ||
| + | background: | ||
| + | } | ||
| + | |||
| + | /*adding the arrows for the breadcrumbs using rotated pseudo elements*/ | ||
| + | .breadcrumb a:after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | right: -18px; /*half of square' | ||
| + | /*same dimension as the line-height of .breadcrumb a */ | ||
| + | width: 36px; | ||
| + | height: 36px; | ||
| + | /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square' | ||
| + | length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) | ||
| + | if diagonal required = 1; length = 1/1.414 = 0.707*/ | ||
| + | transform: scale(0.707) rotate(45deg); | ||
| + | /*we need to prevent the arrows from getting buried under the next link*/ | ||
| + | z-index: 1; | ||
| + | / | ||
| + | background: | ||
| + | background: | ||
| + | /*stylish arrow design using box shadow | ||
| + | box-shadow: | ||
| + | 2px -2px 0 2px rgba(0, 0, 0, 0.4), | ||
| + | 3px -3px 0 2px rgba(255, 255, 255, 0.1); | ||
| + | /* | ||
| + | 5px - for rounded arrows and | ||
| + | 50px - to prevent hover glitches on the border created using shadows*/ | ||
| + | border-radius: | ||
| + | } | ||
| + | /*we dont need an arrow after the last link*/ | ||
| + | .breadcrumb a: | ||
| + | content: none; | ||
| + | } | ||
| + | /*we will use the :before element to show numbers*/ | ||
| + | .breadcrumb a:before { | ||
| + | |||
| + | /*some styles now*/ | ||
| + | border-radius: | ||
| + | width: 20px; | ||
| + | height: 20px; | ||
| + | line-height: | ||
| + | margin: 8px 0; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 30px; | ||
| + | background: | ||
| + | background: | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | |||
| + | .flat a, .flat a:after { | ||
| + | background: | ||
| + | color: white; | ||
| + | transition: | ||
| + | } | ||
| + | .flat a:before { | ||
| + | background: | ||
| + | box-shadow: | ||
| + | } | ||
| + | .flat a:hover, .flat a.active, | ||
| + | .flat a: | ||
| + | background: | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | </ | ||
| + | |||
| + | < | ||
| + | <div class=" | ||
| + | <a href=" | ||
| + | <a href=" | ||
| + | <a href=" | ||
| + | <a href=""> | ||
| + | <a class=" | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | <script src=" | ||
| + | |||
| + | <br /> | ||
| + | <br /> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <h1 style=" | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | < | ||
| + | table { | ||
| + | font-family: | ||
| + | border-collapse: | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .table a | ||
| + | { | ||
| + | display: | ||
| + | text-decoration: | ||
| + | } | ||
| + | |||
| + | /*td:hover{ | ||
| + | color: red; | ||
| + | background-color: | ||
| + | }*/ | ||
| + | |||
| + | td, th { | ||
| + | border: 1px solid #dddddd; | ||
| + | text-align: left; | ||
| + | padding: 8px; | ||
| + | |||
| + | } | ||
| + | |||
| + | </ | ||
| + | |||
| + | < | ||
| + | <table class=" | ||
| + | <tr> | ||
| + | <th colspan=" | ||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </tr> | ||
| + | |||
| + | | ||
| + | </ | ||
| + | | ||
| + | | ||
| + | </ | ||
| + | < | ||
| + | |||
| + | <hr /> | ||
| + | | ||
| + | < | ||
| + | |||
| </ | </ | ||
recursos/ficha.1700737053.txt.gz · Última modificación: 2023/11/23 10:57 por thejuanvisu
Herramientas de la página
