2016.05.25. 10:53, Juci
Varicik egy tmra: Hr, az elvlaszt
A varicik egy tmra sorozat j cikkel jelentkezik, ez pedig amit cssben hr-nek, rendes nevn elvlasztnak hvunk. A cikksorozatot t is nevezhetnm mr "amit nem hasznlunk ki elgg" sorozatnak 
Az elvlaszt azrt fantasztikus, mert ha egy prsornyi kdot beillesztesz (hozok majdpldkat, amikbl tudtok vlogatni!) s automatikusan hasznlod blogodban, cikkeidben, moduljaidban a szerkeszt panel segtsgvel, nem kell egyesvel megvltoztatnod ha designvltsrl van sz -elg trnod a kdot a megfelel sznre, stb.
Hogy kszthetek elvlaszt-vonalat?
A szerkeszt panelben ltod ezt a kis jelet ami ez a szrny szrke vonalat hzza. Nah ez kell neknk! Csak feldobjuk!
Automatikusan gy nz ki ha nem formzzuk meg a vonalat.
s mit tudunk belle kihozni egy kis fantzival? Katt a Bvebbenre
Elvihet kdok elvlasztkra!
001.
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
Demo:
002.
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
Demo:
003.
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:before {
content: "";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
text-shadow:1px 2px #ffbec9, 1px 1px #ffbec9, -1px -1px #ffbec9, -1px -2px #ffbec9, -1px 1px #ffbec9, 1px -1px #ffbec9!important;
}
Demo:
004.
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:before {
content: "\f08a";
font-family:FontAwesome;
display: inline-block;
position: relative;
top: -0.9em;
font-size: 10px;
padding: 0 0.25em;
text-shadow:1px 2px #ffbec9,
1px 1px #ffbec9,
-1px -1px #ffbec9,
-1px -2px #ffbec9,
-1px 1px #ffbec9,
1px -1px #ffbec9,
2px 2px #ffbec9,
-2px -2px #ffbec9,
-1px 2px #ffbec9,
-2px 1px #ffbec9,
1px 2px #ffbec9,
2px 1px #ffbec9!important;
}
Fonts Awesome ikont hasznltam, gy be kell illesztened a hozz tartoz kdot ha mg nem hasznltl ilyet az oldaladra! Tedd az egyik res oldalmodulba pl.!
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Demo:
005.
hr {
padding: 0;
border: none;
border-top: medium solid #333;
color: #333;
text-align: center;
}
hr {
content: "\f13a";
font-family:FontAwesome;
display: inline-block;
position: relative;
top: -0.9em;
font-size: 10px;
padding: 0 0.25em;
background: white;
}
Fonts Awesome ikont hasznltam, gy be kell illesztened a hozz tartoz kdot ha mg nem hasznltl ilyet az oldaladra! Tedd az egyik res oldalmodulba pl.!
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Demo:
|
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
Sg