Style CSS do oznaczenia dróg w Polsce

W Wikipedii znalazłem style do wypisywania numerów i oznaczeń dróg powiatowycy takich jak 816 którą właśnie podróżuję, i 82 którą jechałem wczoraj.

A może jest jeszcze sposób na autostrady?

Dopisek:

Nie wiem co znaczy taki styl, a jeżdzę taką drogą codziennie. 902

Kategorie: informatyka, html, _blog, programowanie/html/css

Słowa kluczowe: html, css

Komentarze: (0)

Zegarek w CANVAS

Kategorie: html, informatyka, _blog, programowanie/html/canvas

Słowa kluczowe: html, informatyka, grafika, html5, zegarek, java, js, canvas

Komentarze: (0)

Jeden piksel

Postawiłem sobie nie dawno programistyczne zadanie - narysować biały ekran a na nim zaświecić (albo wygasić) jeden piksel. Postawiłem je sobie aby nauczyć się w JavaScript walczyć z grafiką, ale skoro przeszedłem z blogiem na HTML5 to mogę coś pocudować w SVG.

No to próbuję.

Próba w SVG

<svg width="50px" height="50px" style="background-color: #aaa;" >

<rect x="10px" y="10px" width="1px" height="1px"
            stroke= "black"
            stroke-width= "1px"/>

<circle cx="20px" cy="20px" r="1px"
            stroke="red" 
            stroke-width="1px"/>

<line x1="30px" y1="30px" x2="31px" y2="31px"
            stroke="red" 
            stroke-width="1px"/>
</svg>

No nie wiem, czy to można zaliczyć. Chyba nie.

Niestety, widać, że piksel zrobiony z kwadratu jest kwadratem, z koła kołem (nawet ma wypełnienie jak go powiększyć w przeglądarce, a z linii jest pikselem skierowanym w dół. Ale w SGV nie ma komendy punkt i to jest dziwne.

Niezaliczono!

Ale próbuję w CANVAS

Your user agent does not support the HTML5 Canvas element.

Jeżeli powyżej nie widać czarnego kwadratu to niezaliczono!

Próbuję po prostu DIV w HTML5

Maluje żółtego DIV 100 na 100 a w nim niebieskiego 1 na 1 i zobaczymy:

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, canvas, html, informatyka, grafika, html5, piksel, pixel

Komentarze: (2)

Spotkanie z SVG w HTML5

Przechodzę z blogiem na HTML5 a więc będę mógł sobie grafikę SVG wkładać bezpośrednio w treść notek. Kiedyś musiałem osadzać obiekty a teraz - o proszę, otwiera się frazę <svg> i się pisze coś, aby mieć taki obrazek.

<svg 
width="350px" 
height="350px" 
viewBox="0 0 500 500"         
xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10" width="100" height="100"
            fill= "yellow"
            fill-opacity= "1"
            stroke= "gray"
            stroke-width= "2"/>

<circle cx="100" cy="100" r="50"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<line x1="100" y1="300" x2="300" y2="100"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<path d="M97,246 C119,169 220,209 243,127 C291,27 281,223 419,271"
            fill="none"
            fill-opacity= "0.5"
            stroke="green" 
            stroke-width="3"/>        

<rect x="50" y="180" width="300" height="200"
            fill= "#55ff55"
            fill-opacity= "0.5"
            stroke= "#228822"
            stroke-width= "1"
rx="50" ry="100" />

<text style="fill:red; font-size:430%; font-family: arial;
font-weight:bold;" x="310" y="350">W34</text>

</svg>

Nie wiem jeszcze po co tak, ale próbuję. Stara notka o tym jak się to robiło w HTML 4 jest tu -> http://www.pp.org.pl/wojtek/?id=31260 i może zadziała a może nie.

No i jeszcze coś - jeszcze spróbuję z wzorami matematycznymi, bo to też jest fajne.

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, html, informatyka, grafika, html5

Komentarze: (1)

Nowości w CCS

To jest prosty test Google

A jak ktoś ma potrzebę sobie poćwiczyć w HTML, CSS i JS to tu jest fajne miejsce:

http://jsfiddle.net

Kategorie: informatyka, html, _blog

Słowa kluczowe: html, css, css3, html5

Komentarze: (1)

Fajne sztuczki w CSS - first-letter

Pierwsza litera w akapicie może wyglądać jak w średniowiecznych manuskryptach albo inkunabułach jeżeli w klasie ksiega wykorzysta się klasę first-letter.

*.ksiega P:first-letter {
	float: left;
	color: red;
	font-size: 440%;
	line-height: 80%;
}

Nauczyłem się tego tu: http://www.kurshtml.boo.pl/css/cudzyslowy,pseudoelementy.html

A tu przykładowe zastosowanie:

Kategorie: html, _blog

Słowa kluczowe: html, css

Komentarze: (0)

CSS: white-space: pre;

Aby łatwiej było formatować wiersze wymyślono w CSS taką funkcjonalność jak white-space: pre; powodującą, że wszystkie spacje są wyświetlane i mają stałą szerokość.

Próbuję:

Kategorie: html, _blog

Słowa kluczowe: css, html, pre

Komentarze: (0)

 Test paragrafów

Mniej ważny tytuł

Tytuł trzeciego stopna czyli jeszcze mniej ważny

Neque porro quisquam est, qui dolorem ipsum quia Enter dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Neque porro quisquam est, qui dolorem ipsum quia Enter dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

aliquid ex ea commodi consequatur?Neque porro quisquam est, qui dolorem ipsum quia Enter dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea

voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. 

Kategorie: html, _blog

Słowa kluczowe: html, css, test formatowania

Komentarze: (0)