Kategoria: html


1 lipca 2015 (środa), 23:50:50

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)

Skomentuj notkę
18 stycznia 2015 (niedziela), 19:40:40

Zegarek w CANVAS


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


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


Komentarze: (0)

Skomentuj notkę
18 stycznia 2015 (niedziela), 17:48:48

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

Efekt programowania w SVG

Kod zapisany 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)

ky, March 30, 2015 13:38 Skomentuj komentarz


1. Kwadrat o rozmiarze 1px rysowany linią 1px powinien mieć bok 2px...
2. kółko o promieniu R=1px miało by rozmiar jakieś 2px "na oko", a jak się uwzględni grubość lini 1px to będzie 3px - powinno być większe niż kwadrat i u mnie w przeglądarce jest...
3. linia pomiędzy dwoma punktami po przekątnej ma długość ok 1,41px, lub więcej w zależności stroke-linecap... to jest najmniejsze, ale wygląda na podłużne bo co najmniej długość = 2*szerokość...

wojtek, November 29, 2019 18:27 Skomentuj komentarz


Fajnie, ale jak namalować pixel? Ja chcę mieć na ekranie coś o rozmiarze 1px na 1px i nie wiem jak to zrobić!

Skomentuj notkę
18 stycznia 2015 (niedziela), 16:27:27

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.

Efekt programowania w SVG

W34

Kod zapisany w SVG

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

wojtek, June 25, 2020 07:40 Skomentuj komentarz


https://editor.method.ac

Skomentuj notkę
14 marca 2009 (sobota), 15:14:14

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:

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.

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


Kategorie: html, _blog


Słowa kluczowe: html, css


Komentarze: (0)

Skomentuj notkę
16 kwietnia 2008 (środa), 21:26:26

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

123 456 789 0 abc 234 567 890 1 bcd 345 678 901 2 cde 456 789 012 3 def abcdefghijklmnoprstuvz iiiii iiii iii ii i mmmmm mmmmm mm mmm

Kategorie: html, _blog


Słowa kluczowe: css, html, pre


Komentarze: (0)

Skomentuj notkę
18 listopada 2005 (piątek), 14:32:32

 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, quif0a5ccc6362ff1e649d6575d9a3fcb2cs 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?

 

Quis autem vel eum iure reprehenderit qui in ea voluptate

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.
Gazeta Wyborcza, czwartek, 34 marca 1957 roku

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

Ukradł czy też jemu ukradli?

Gazeta Wyborcza, czwartek, 34 marca 1957 roku

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.

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 strona-tytulowa-Elias_Hutter,_Derekh_ha-Kodesh_Hamburg_1587 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)

Skomentuj notkę

Disclaimers :-) bo w stopce coś wyglądającego mądrze można napisać. Wszystkie powyższe notatki są moim © wymysłem i jako takie związane są ze mną. Ale są też materiały obce, które tu przechowuję lub cytuje ze względu na ich dobrą jakość, na inspiracje, bądź ilustracje prezentowanego lub omawianego tematu. Jeżeli coś narusza czyjeś prawa - proszę o sygnał abym mógł czym prędzej naprawić błąd i naruszeń zaniechać.