Only one request, many bg images
A Pen by Sergio Forés on CodePen.
Created
March 8, 2015 18:18
-
-
Save anonymous/f5ffdb56c707c364b76e to your computer and use it in GitHub Desktop.
Sprite in SVG 4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <hgroup> | |
| <h1>Sprite SVG</h1> | |
| <h2>One svg file, many differents bg images and sizes to reuse</h2> | |
| </hgroup> | |
| </header> | |
| <main> | |
| <div class="ico-graviola">I'm so big...</div> | |
| <div class="ico-graviola-sm" title="I'm small!"></div> | |
| <div class="ico-graviola-md" title="I'm medium!"></div> | |
| <div class="ico-graviola-xl" title="I'm large!"></div> | |
| <div class="ico-goji">I'm also big</div> | |
| <div class="ico-goji-sm" title="I'm small!"></div> | |
| <div class="ico-goji-md" title="I'm medium!"></div> | |
| <div class="ico-goji-xl" title="I'm large!"></div> | |
| <div class="ico-cacaocriollo"></div> | |
| <div class="ico-cacaocriollo-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-chlorella" title="I'm a tinny icon!"></div> | |
| <div class="ico-chlorella-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-chia"></div> | |
| <div class="ico-chia-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-chia-md" title="I'm a tinny icon!"></div> | |
| <div class="ico-chia-xl" title="I'm a tinny icon!"></div> | |
| <div class="ico-amaranto" title="I'm a tinny icon!"></div> | |
| <div class="ico-amaranto-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-amaranto-md"></div> | |
| <div class="ico-amaranto-xl"></div> | |
| <div class="ico-spiroulina"></div> | |
| <div class="ico-spiroulina-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-spiroulina-md"></div> | |
| <div class="ico-spiroulina-xl"></div> | |
| <div class="ico-camucamu"></div> | |
| <div class="ico-camucamu-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-camucamu-md"></div> | |
| <div class="ico-camucamu-xl"></div> | |
| <div class="ico-canamo"></div> | |
| <div class="ico-canamo-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-canamo-md"></div> | |
| <div class="ico-canamo-xl"></div> | |
| <div class="ico-lucuma"></div> | |
| <div class="ico-lucuma-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-lucuma-md"></div> | |
| <div class="ico-lucuma-xl"></div> | |
| <div class="ico-maca"></div> | |
| <div class="ico-maca-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-maca-md"></div> | |
| <div class="ico-maca-xl"></div> | |
| <div class="ico-stevia"></div> | |
| <div class="ico-stevia-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-stevia-md"></div> | |
| <div class="ico-stevia-xl"></div> | |
| <div class="ico-quinoa"></div> | |
| <div class="ico-quinoa-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-alfalfa"></div> | |
| <div class="ico-alfalfa-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-alfalfa-md"></div> | |
| <div class="ico-alfalfa-xl"></div> | |
| <div class="ico-trigoverde"></div> | |
| <div class="ico-trigoverde-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-trigoverde-md"></div> | |
| <div class="ico-trigoverde-xl"></div> | |
| <div class="ico-algarroba"></div> | |
| <div class="ico-algarroba-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-cardomariano"></div> | |
| <div class="ico-cardomariano-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-cardomariano-md"></div> | |
| <div class="ico-cardomariano-xl"></div> | |
| <div class="ico-linodorado"></div> | |
| <div class="ico-linodorado-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-fresa"></div> | |
| <div class="ico-fresa-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-fresa-md"></div> | |
| <div class="ico-fresa-xl"></div> | |
| <div class="ico-coco"></div> | |
| <div class="ico-coco-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-coco-md"></div> | |
| <div class="ico-coco-xl"></div> | |
| <div class="ico-gymtonic"></div> | |
| <div class="ico-gymtonic-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-delifiber"></div> | |
| <div class="ico-delifiber-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-brainshake"></div> | |
| <div class="ico-brainshake-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-andeanprotein"></div> | |
| <div class="ico-andeanprotein-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-macuchino"></div> | |
| <div class="ico-macuchino-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-macuchino-md"></div> | |
| <div class="ico-macuchino-xl"></div> | |
| <div class="ico-bodtox"></div> | |
| <div class="ico-bodtox-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-bodtox-md"></div> | |
| <div class="ico-royalbreakfast"></div> | |
| <div class="ico-royalbreakfast-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-royalbreakfast-md"></div> | |
| <div class="ico-royalbreakfast-xl"></div> | |
| <div class="ico-camucao"></div> | |
| <div class="ico-camucao-sm" title="I'm a tinny icon!"></div> | |
| <div class="ico-camucao-md"></div> | |
| <div class="ico-camucao-xl"></div> | |
| </main> | |
| <footer> | |
| <small>Developed by Sergio Forés in <a class="btn" href="http://energyfruits.es"> energyfruits.es</a> web site</small> | |
| </footer> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $seconds: 1s; | |
| $image-path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/'; | |
| $brand_names: graviola goji cacaocriollo chlorella chia amaranto spiroulina camucamu canamo maca lucuma stevia quinoa alfalfa trigoverde algarroba cardomariano linodorado fresa coco gymtonic delifiber brainshake andeanprotein macuchino bodtox royalbreakfast camucao; | |
| // Brand colors | |
| $color_graviola: rgb(127,116,76); | |
| $color_goji: rgb(230,25,11); | |
| $color_cacaocriollo: rgb(60,29,29); | |
| $color_chlorella: rgb(30,19,16); | |
| $color_chia: rgb(140,126,115); | |
| $color_amaranto: rgb(177,35,101); | |
| $color_spiroulina: rgb(46,56,40); | |
| $color_camucamu: rgb(101,51,60); | |
| $color_canamo: rgb(0,144,77); | |
| $color_maca: rgb(171,69,108); | |
| $color_lucuma: rgb(245,176,6); | |
| $color_stevia: rgb(0,123,74); | |
| $color_quinoa: rgb(194,41,49); | |
| $color_alfalfa: rgb(38,136,112); | |
| $color_trigoverde: rgb(74,121,47); | |
| $color_algarroba: rgb(31,20,16); | |
| $color_cardomariano: rgb(166,120,174); | |
| $color_linodorado: rgb(222,197,67); | |
| $color_fresa: rgb(226,56,3); | |
| $color_coco: rgb(129,77,35); | |
| $color_gymtonic: rgb(192,4,17); | |
| $color_delifiber: rgb(239,214,0); | |
| $color_brainshake: rgb(217,145,0); | |
| $color_andeanprotein: rgb(58,99,36); | |
| $color_macuchino: rgb(176,135,66); | |
| $color_bodtox: rgb(163,189,49); | |
| $color_royalbreakfast: rgb(113,22,17); | |
| $color_camucao: rgb(139,59,29); | |
| // Brand Colors | |
| $brand_colors: $color_graviola $color_goji $color_cacaocriollo $color_chlorella $color_chia $color_amaranto $color_spiroulina $color_camucamu $color_canamo $color_maca $color_lucuma $color_stevia $color_quinoa $color_alfalfa $color_trigoverde $color_algarroba $color_cardomariano $color_linodorado $color_fresa $color_coco $color_gymtonic $color_delifiber $color_brainshake $color_andeanprotein $color_macuchino $color_bodtox $color_royalbreakfast $color_camucao; | |
| // Posicion en el Sprite | |
| $graviola: 0; | |
| $goji: -400; | |
| $cacaocriollo: -800; | |
| $chlorella: -1200; | |
| $chia: -1600; | |
| $amaranto: -2000; | |
| $spiroulina: -2400; | |
| $camucamu: -2800; | |
| $canamo: -3200; | |
| $maca: -3600; | |
| $lucuma: -4000; | |
| $stevia: -4400; | |
| $quinoa: -4800; | |
| $alfalfa: -5200; | |
| $trigoverde: -5600; | |
| $algarroba: -6000; | |
| $cardomariano: -6400; | |
| $linodorado: -6800; | |
| $fresa: -7200; | |
| $coco: -7600; | |
| $gymtonic: -8000; | |
| $delifiber: -8400; | |
| $brainshake: -8800; | |
| $andeanprotein: -9200; | |
| $macuchino: -9600; | |
| $bodtox: -10000; | |
| $royalbreakfast: -10400; | |
| $camucao: -10800; | |
| $sprite_position: $graviola $goji $cacaocriollo $chlorella $chia $amaranto $spiroulina $camucamu $canamo $maca $lucuma $stevia $quinoa $alfalfa $trigoverde $algarroba $cardomariano $linodorado $fresa $coco $gymtonic $delifiber $brainshake $andeanprotein $macuchino $bodtox $royalbreakfast $camucao; | |
| // Asigna el elemento del sprite a cada una de las clases de la lista | |
| @each $name in $brand_names { | |
| $i: index($brand_names, $name); | |
| $elcolor: nth($brand_colors, $i); | |
| @each $tamano, $size in (sm: 10, md: 15, xl: 30) { | |
| .ico-#{$name}, .ico-#{$name}-#{$tamano}:before { | |
| background-image: url(#{$image-path}sprites.svg); | |
| background-repeat: no-repeat; | |
| background-position: center (nth($sprite_position, $i) / 92) + em; | |
| height: 4em; | |
| background-size: 10em; | |
| } | |
| .ico-#{$name} { | |
| width: 100%; | |
| font-size: 50px; | |
| line-height: 5; | |
| background-color: lighten($elcolor,5); | |
| &:hover { | |
| transition: all 1s; | |
| background-color: darken($elcolor,10); | |
| background-position: 2em (nth($sprite_position, $i) / 92) + em; | |
| } | |
| } | |
| .ico-#{$name}-#{$tamano} { | |
| position: relative; | |
| font-size: #{$size}px; | |
| } | |
| .ico-#{$name}-xl { top: -1em; } | |
| .ico-#{$name}-md { left: 70%; } | |
| .ico-#{$name}-#{$tamano}:before { | |
| content: ""; | |
| position: absolute; | |
| top: -5em; | |
| left: 0; | |
| right: 0; | |
| width: 10em; | |
| text-align: right; | |
| } | |
| .ico-#{$name}-#{$tamano}:after { | |
| content: attr(title); | |
| position: absolute; | |
| top: -4em; | |
| left: 5em; | |
| } | |
| } | |
| } | |
| body { | |
| padding: 0 20px; | |
| font-family: 'Open Sans', sans-serif; | |
| text-align: center; | |
| } | |
| .exemple { | |
| background-color: red; | |
| width: 350px; | |
| } | |
| h1 { font-size: 300%; } | |
| h2 { font-size: 200%; } | |
| small { font-size: 100%; } | |
| main { | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| main, header, footer { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin: 25px 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment