| Autor | Zpráva | ||
|---|---|---|---|
| iso Profil * |
uz dlhsiu dobu sa snazim zistit ako sa da spravit "sikma ciara".. nie je problem urobit vertikalnu alebo horizontalnu ciaru cez stranku (cez hr, linebreak, border urcitych prvkov a podobne.. to nie je podstatne teraz), ale ako sa da spravit sikma ciara napr. pod 45 stupnovym uhlom, ktora by isla cez celu stranku? je jedno ci riesenie spociva v CSS v jave ci v ich kombinacii.. hlavne som zvedavy ako sa to da urobit..
samozrejme riesenie typu, ze ciaru vlozim ako obrazok do stranky ma nezaujima, skor mi ide o kodove riesenie tohto problemu.. dakujem za kazdy postreh Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
|
||
| Joker Profil |
#2 · Zasláno: 31. 8. 2011, 15:19:52
iso:
Obrázek na pozadí, spousta napozicovaných 1px elementů, SVG, v HTML 5 <canvas>. Univerzálně podporované v prohlížečích jsou zatím asi jen první dva způsoby, ovšem ten druhý je dost pakárna. |
||
| Baklazan Profil |
#3 · Zasláno: 31. 8. 2011, 15:24:38
:)
<style>
.ciara {
z-index:50;
height: 0px; width: 0px;
border-style: solid;
border-color: #ff9000 transparent transparent transparent;
border-width: 100px 40px 0px 20px;
position:absolute;
}
.obal {
z-index:100;
height: 0px; width: 0px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
border-width: 100px 39px 0px 19px;
position:absolute;
}
</style>
<div class="ciara" >
</div>
<div class="obal">
</div>
|
||
| iso Profil * |
#4 · Zasláno: 31. 8. 2011, 16:40:47
baklazan: to by ma nikdy nenapadlo popravde, ale diki :) som to skusal ale vobec to nevypada pekne.. vysledna ciara je strasne zubata - kockata
joker: diki, tiez som rozmyslal nad druhym postupom, ze by sa zobral maly obrazok napr. 15px x 15px s diagonalnou ciarou (pokial hovorime o ciare s uhlom 45 stupnov samozrejme) a mnozstvo takchto obrazkov by sa v CSS pekne pomaly napozicovalo kaskadovito a vytvorilo by to suvislu ciaru.. len som bol zvedavy ci neexistuje nieco v jave alebo tak co by to urobilo automaticky popr. ci neexistuje nieco co by vedelo len jednoducho pootocit ciaru o nejaky uhol... ale zrejme asi nic.. |
||
| Joker Profil |
#5 · Zasláno: 31. 8. 2011, 16:56:31
iso:
To druhé bylo myšlené jinak: Lze vyrobit <div> (nebo jiný prvek) o velikosti 1px. No a z takových „pixelů“ pak jde seskládat jakýkoliv obrázek. |
||
| Witiko Profil |
#6 · Zasláno: 31. 8. 2011, 17:13:24
Inspiroval bych se tímto: http://www.cssplay.co.uk/menu/flag - Jedná se o výbornou ukázku čeho lze docílit jednoduchým hraním si s okraji blokových elementů.
|
||
| Chamurappi Profil |
#7 · Zasláno: 31. 8. 2011, 17:17:22 · Upravil/a: Chamurappi
Reaguji na isa:
Ve všech současných prohlížečích jde libovolný element rotovat, ale v každém jinak. Čáru pod úhlem 45° by šlo udělat nějak takhle: #ciara {
width: 5px;
height: 500px;
background: red;
filter: progid:DXImageTransform.Microsoft.Matrix(m11=0.70710678, m12=-0.70710678, m21=0.70710678, m22=0.70710678, sizingMethod='auto expand');
-moz-transform: translate(176.77px, -69.69px) rotate(45deg);
-o-transform: translate(176.77px, -69.69px) rotate(45deg);
-webkit-transform: translate(176.77px, -69.69px) rotate(45deg);
}-ms-transform, ale nepřestal podporovat filter, takže kdybych ho použil, byl by schopný rotovat čáru dvakrát.
|
||
| iso Profil * |
#8 · Zasláno: 31. 8. 2011, 17:59:57
joker: diki moc, skúsim ešte aj túto možnosť, len mám ešte otázku, že či to nebude príliš spomalovať stránku, resp. predlžovať čas načítania.. pretože predsa kým z 1px vyskladám čiaru cez celú stránku tak to bude napr. 800 príkazov.. hm?
witiko, chamurappi: idem sa kuknúť na vaše riešenia, zatiaľ ďakujem!! |
||
| Joker Profil |
#9 · Zasláno: 31. 8. 2011, 18:28:47
iso:
To s těmi 1px <div>y bylo spíš jen „že to jde“, ne doporučení jak se to má dělat. Já osobně bych asi použil obrázek na pozadí. Případně Chamurappiho řešení je zajímavé. |
||
| iso Profil * |
#10 · Zasláno: 1. 9. 2011, 00:44:29
chamurappi: diki moc, tvoje riešenie funguje vcelku luxusne.. bolo by len možné mi vysvetliť čo ktore príkazy znamenajú?ako zacina filter atd. tak uz som strateny.. diki
|
||
| iso Profil * |
#11 · Zasláno: 1. 9. 2011, 01:12:28
witiko: prosim ta, ako sa dostanem na cssplay.co.uk ku kodom jednotlivych veci? dik
|
||
| panther Profil |
#12 · Zasláno: 1. 9. 2011, 01:16:11
iso:
„ako sa dostanem na cssplay.co.uk ku kodom jednotlivych veci?“ stejně jako všude jinde, Ctrl+U (nebo z kontextové nabídky „Zobrazit zdrojový kód“). |
||
| iso Profil * |
#13 · Zasláno: 1. 9. 2011, 15:14:50
panther: dakujem, popravde ani ma to nenapadlo ze to bude takto pristupne..
|
||
|
Časová prodleva: 13 let
|
|||
0