Just add a few classes and have all the signs in all the colors that you'd ever need.
I wanted to use trail signs here and there so I traced the signs into SVGs.
Then came the idea, why not make a little fake font-set like thing so that I can use them in web
projects.
So, here they are...
Usage 1. Download the *-latest.css or *-latest.min.css file from GitHub. 2. Link it in your <head> 3. Use the classes below 4. Profit
A single CSS file that contains the SVG text content and uses the :before
pseudo selector and the content property to insert these SVGs. No further requests to file
anywhere.
All SVGs are white and have negative space / cutout in them, making some parts
transparent. These holes reveal the background color underneath, so any color can be used to
insert these signs, no need to have multiple versions of the same sign just to have different
colors.
Example
This is a basic example, it will insert a blue line/stripe sign where it is.
<i class="jel jel-line jel-color-blue"></i> ->
The basic code must contain 3 class names:
- jel
This is always required
- jel-color-{COLOR} or jel-szin-{COLOR}
Ready to use color names:
blue / kék / kek - rgb(0, 59, 128)
red / piros - rgb(199, 23, 18)
yellow / sarga / sárga - rgb(252, 184, 33)
green / zold / zöld - rgb(36, 145, 64)
purple / lila - rgb(125, 31, 122)
black / fekete - rgb(0, 0, 0)
grey / gray / szurke / szürke - rgb(128, 128, 128)
- jel-{SIGNNAME}
All signs and names are listed at the end of the page
Tudtam, hogy a mai alkalommal sok különböző jelzésen kell mennem, , , és társai, de ennyi mindenre nem számítottam. Találkoztam életem legkisebb kör jelzésével és a legnagyobb veszélyt jelző háromszöggel is egy sorompó tartó beton tömbön.
Szerintem még sose volt ennyire kacskaringós útam, ennyire változatos felfestésekkel, még egy -t is láttam az egyik elágazásnál.
Tudtam, hogy a mai alkalommal sok különböző jelzésen kell mennem, , , és társai, de ennyi mindenre nem számítottam. Találkoztam életem legkisebb kör jelzésével és a legnagyobb veszélyt jelző háromszöggel is egy sorompó tartó beton tömbön.
Szerintem még sose volt ennyire kacskaringós útam, ennyire változatos felfestésekkel, még egy -t is láttam az egyik elágazásnál.
Tudtam, hogy a mai alkalommal sok különböző jelzésen kell mennem, , , és társai, de ennyi mindenre nem számítottam. Találkoztam életem legkisebb kör jelzésével és a legnagyobb veszélyt jelző háromszöggel is egy sorompó tartó beton tömbön.
Szerintem még sose volt ennyire kacskaringós útam, ennyire változatos felfestésekkel, még egy -t is láttam az egyik elágazásnál.
Itt séta közben találtam egy nagyon furcsa rózsíszín sávot (style="background-color: deeppink;"), ami nem tudom honnan jött és mit jelent. Mi lesz a következő, valamilyen színátmenetes festés (background-image: linear-gradient(45deg, rgba(255,0,0,1) 33%, rgba(31,255,0,1) 50%, rgba(0,31,255,1) 66%);) amit 3-4 különböző alkalommal kell felfesteni sínenként egyesével, hogy szép legyen? Vagy kitalálnak valamilyen átlátszót?(style="background-color: rgba(0,0,0,0.5);)
Modifiers
- jel-nincsarnyek / jel-noshadow (class)
This will remove the CSS drop shadow from the sign
- jel-keret / jel-border (class)
This will add a small color matching border to the sign
- jel-nincsterkoz / jel-nowhitespace (class)
Removes the spacing before and after the sign
- jel-kicsi / jel-sm / jel-small (class)
Smaller version. This will make the height 0.75em tall.
- jel-nagy / jel-big / jel-lg / jel-large (class)
Bigger version. This will make it 1.5em tall.
- any background CSS style property (attribute)
style="background-color: teal;"
style="background-color: rgba(12, 99, 200, 0.89);"
style="background-image: linear-gradient(red, yellow);"
Any valid CSS property value pair should work