TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Duch
Ahoj, prosím o radu.
Snažím se vytvořit navigační šipky v css pro přechod mezi stránkami tabulky.
Samozřejmě to mohu udělat obrázkama, ale zaujala mě možnost kreslení v css, tak se do toho snažím trochu proniknout.
Udělat samostatný trojúhelník či kolečko nebo čtvereček, prostě základní tvary už celkem zvládám, ale pořád nemohu přijít na to jak udělat šipku s čárkou na její straně.tedy jako konec nebo začátek a to nejlépe do jedné class.
Fórum › CSS
Navigační šipky
Nahlásit jako SPAM
IP: 62.24.81.–
Grafoman"Samozřejmě to mohu udělat obrázkama, ale zaujala mě možnost kreslení v css"
Ne. Zpet k obrazkum. Jestli je chces mit v css, tak css dnes uz snad vsude podporuje base64 zapis obrazku.
S svg jeste stale muze byt problem s podporou v prohlizecich. Vyhodou je, ze je to vektorova grafika, lze ji zoomovat bez ztrat. Nicmene, uz jsem tuto moznost zvazoval pro jeden web, kde vzhled menim jen zmenou barev pro ruzna odeleni a na to jsou funkce svg uplne suprove.
Treba ti neco z toho bude fungovat. Najdi si googlem, jak se kresli v svg sipecky.
--- soubor.htm, svg v css i s kodem ---
<style>
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale2 {
filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale2'><feColorMatrix type='matrix' values='0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0'/></filter></svg>#grayscale2"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
</style>
<img src="butt-spinavemodra.png" class="grayscale"><br>
<img src="butt-spinavemodra.png" class="grayscale2"><br>
<img src="butt-spinavemodra.png">
--- zapis v svg ---
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="desaturate1">
<feColorMatrix
type="matrix"
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
<filter id="desaturate2">
<feColorMatrix
type="matrix"
values="0.299 0.587 0.114 0 0
0.299 0.587 0.114 0 0
0.299 0.587 0.114 0 0
0 0 0 1 0"/>
</filter>
</svg>
--- dalsi jiny zapis ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
svg {
height: 0;
}
p {
background-image: url("butt-spinavemodra.png");
margin: 10px auto;
filter: url(#grayscale);
display: block;
width: 250px;
height: 100px;
}
</style>
<title>SVG Filters - Grayscale Effect</title>
</head>
<body>
<p>
Test box
</p>
<p>
Test box
</p>
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
</body>
</html>
obrazek v css - to je normalni prevod dat obrazku ze soustavy 0-255 do soustavy 0-63 za pouziti pismennych znaku AZaz09+/ a = http://cs.wikipedia.org/wiki/Base64
http://css-tricks.com/data-uris/ ;
base64 v html
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
base64 v css
li {
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
prevod v php do base64
<?php
echo base64_encode(file_get_contents("../images/folder16.gif"))
?>#9 danhill
Právě naopak - je to přesně tak! A to je ten problém - HTML5 a CSS3 jsou příliš nové technologie. Pokud chceš dělat jednovrstvený web s co největší podporou, musíš použít starší technologie. A právě jak tento a dalších XY článků dokazuje - jak jsem psal, XHTML je tu od počátku věků. Pokud použiješ CSS3, tak stejně musíš napsat alternativy pro starší prohlížeče, jiné platformy atp. - čímž se z jednoduchého webu stává zbytečně složitá záležitost. Proto je výhodnější menší weby psát se staršími technologiemi. Naopak větší weby je dobré psát za pomoci frameworku, či tak - poněvadž kód stejně čistý nikdy nebude a ušetří to kilogramy práce. Proto jsem se také zeptal, zda nebude lepší SVG - to je narozdíl od CSS3 mnohem podporovanější. (U webu však vždy bude platit, že co platforma, to jiný kód.)
Díky, to dává určitý smysl ... Ovšem pro začátečníka jako já je to trochu dilema.
S php a css začínám, snažím se do toho intenzivně proniknout asi posledního půl roku téměř každodenním studiem a pořád mám pocit že jsem na začátku, protože přesně,když objevím něco,co se mi líbí a začnu to trochu chápat a jinde se dočtu, že je to super, někdo jiný řekne, že takhle ne :) ... vstupuju do problematiky asi v hodně neusazenou dobu a mám z toho rozpolcený pocit. Nevím čeho se pořádně chytit a co se učit, protože ve všem je trochu rozdíl. Jen více než měsíc mi trvalo abych aspoň trochu pochopil PDO místo MYSQL, které už mi zase jinde nebylo doporučeno používat pro jeho zastaralost a nebezpečnost ... A tak je to ze vším :)
#11 danhill
Když napíšeš web za pomoci kreslení v CSS, CSS animací, transitionů atp. + jako bonus se naučíš používat tagy video, input color atp. Tak web poběží sotva 1/3. Zkrátka to stejně musíš kombinovat s dalšími XY verzemi - mít XY CSS souborů atp. To se nedá - tak se nauč spíše používat nějaký engine/framework/... Anebo to můžeš očůrat tím, jak jsem psal - že použiješ starší a tedy více podporovanou věc. Pokud použiješ novější, tak již jen pro různé prohlížeče musíš mít různé verze... (moz, webkit, ...) Navíc musíš řešit rozlišení, kterých je nepřeberné množství - tím se stává téměř nemyslitelné v dnešní době napsat moderní a přitom lehký web - to nejde. Proto vyhrává Wordpress atd. - poněvadž jinak by to bylo jako psát program ve strojovém kódu.
MA - promin, ale podpora svg v prohlizecich je prinejmensim sporna. Prevazna uzivatelu xp ma defaul instalaci IE 5-6, ti lepsi 7 a nekteri 8. Xp IE9 nepodporuje. IE9 potrebujes na svg..
http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
http://en.wikipedia.org/…rer_versions
Jo, slo mi o ty tabulky dole, nemusite cist ten text.
Jinak souhlas, ze je dobre pouzit stare technologie. Html5 je nove a zatim ne zcela odladene. Spoustu veci treba jede v jednom prohlizeci, ale v druhem uz ne. Kdezto ty zakladni veci z html4 jedou vetsinou ve vsech.
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 10 hostů
Podobná vlákna
Špatný kurzor - hodiny místo šipky — založil Štěpán
Moderátoři diskuze
