Navigační šipky – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Navigační šipky – CSS – Fórum – Programujte.comNavigační šipky – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
danhill0
Duch
19. 2. 2015   #1
-
0
-

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.

Připojen obrázek.

Připojen obrázek.

Nahlásit jako SPAM
IP: 62.24.81.–
Reklama
Reklama
Matěj Andrle+1
Grafoman
19. 2. 2015   #2
-
0
-

#1 danhill
Není nejlepší cestou SVG?

Nahlásit jako SPAM
IP: 78.136.160.–
danhill0
Duch
20. 2. 2015   #3
-
0
-

vůbec netuším co to SVG je :)

Nahlásit jako SPAM
IP: 62.24.81.–
Matěj Andrle+1
Grafoman
20. 2. 2015   #4
-
0
-

#3 danhill
www.google.cz (Doporučuji Inkscape.)

Nahlásit jako SPAM
IP: 78.136.151.–
peter
~ Anonymní uživatel
2528 příspěvků
20. 2. 2015   #5
-
0
-

"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"))
?>
Nahlásit jako SPAM
IP: 2001:718:2601:1f7:10d7:56...–
Matěj Andrle+1
Grafoman
20. 2. 2015   #6
-
0
-

#5 peter
Jsi mimo - XHTML! (SVG)

Nahlásit jako SPAM
IP: 78.136.151.–
danhill0
Duch
20. 2. 2015   #7
-
0
-

Hm, tak jak jsem předpokládal, všechno je zase jinak než jsem si myslel a sotva jsem začínal chápat něco nového, tak už je to zase staré, sakra ... :D ... 

Každopádně děkuji za názor a ukázku.

Nahlásit jako SPAM
IP: 88.103.91.–
Matěj Andrle+1
Grafoman
20. 2. 2015   #8
-
0
-

#7 danhill
Jak již jsem psal - jukni na XHTML. XHTML tu bylo odjakživa, pročež je všude podporované - narozdíl od HTML5 a CSS3. Proto jsem se tu také ostatně ohradil - vždyť je to technologie skoro stejně stará jako HTML... :D

Nahlásit jako SPAM
IP: 78.136.151.–
danhill0
Duch
20. 2. 2015   #9
-
0
-

Takže to co píšou tady není pravda?  http://www.zdrojak.cz/clanky/xhtml-je-mrtve-at-zije-html5-nebo-ne/

Nahlásit jako SPAM
IP: 88.103.91.–
Matěj Andrle+1
Grafoman
20. 2. 2015   #10
-
0
-

#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.)

Nahlásit jako SPAM
IP: 78.136.151.–
danhill0
Duch
20. 2. 2015   #11
-
0
-

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 :)

Nahlásit jako SPAM
IP: 88.103.91.–
Matěj Andrle+1
Grafoman
20. 2. 2015   #12
-
0
-

#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.

Nahlásit jako SPAM
IP: 78.136.151.–
peter
~ Anonymní uživatel
2528 příspěvků
20. 2. 2015   #13
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:10d7:56...–
Matěj Andrle+1
Grafoman
20. 2. 2015   #14
-
0
-

#13 peter
Já jen napsal, že je více podporovaná, než CSS3 - chceš to popřít? :D

Nahlásit jako SPAM
IP: 78.136.151.–
peter
~ Anonymní uživatel
2528 příspěvků
20. 2. 2015   #15
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:10d7:56...–
danhill0
Duch
20. 2. 2015   #16
-
0
-

No tak to je jasný ... jak v tom můžu mít pořádek já jako laik, když ani odborníci v tom nemají zcela jasně ... :) ... Je na tom aspoň pozitivní,že si člověk prostě může vybrat ... :)

Nahlásit jako SPAM
IP: 88.103.91.–
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý