Magyar Opera

Opera logó CSS-ből

Eddig is tudtam, hogy CSS-sel csodákat lehet tenni (erre remek példa a CSS Zen kert millió példája). David Desandro viszont túllépett ezen a szinten, és csak CSS-t használva kirajzolta az Opera új logóját. Őszintén szólva ettől azért leesett az állam. Nem hinném, hogy a CSS-t erre kellene használnunk a jövőben, de ettől függetlenül ez egy jó példa arra, hogy megmutassa, mekkora potenciál van benne. Sőt, ha megnézzük, hogy egy ilyen komplex CSS-t mennyire hasonlóan jelenítik meg a szabványos böngészők, és mennyire másképp az Explorer, akkor még a szabványok szükségességére és hasznosságára is nagyon jól rávilágít.

Szóval a lényeg, hogy itt nincs semmilyen kép, ezek csak div-ek és CSS. Próbáld meg nagyítani, és próbáld ki különböző böngészőkben is.

A következő képen jól látszik, hogy az összes nagyobb böngésző az Explorer kivételével nagyon hasonló képet generál, mint az eredeti logó (az első kép). Az Explorer pedig - szokás szerint - kissé sajátosan kezeli a dolgot.

Forrás: desandro.com

A bejegyzés trackback címe:

https://magyaropera.blog.hu/api/trackback/id/tr511878895

Trackbackek, pingbackek:

Trackback: Opera logó CSS-ből 2010.03.30. 05:55:10

Eddig is tudtam, hogy CSS-sel csodákat lehet tenni (erre remek példa a CSS Zen kert millió példája). David Desandro viszont túllépett ezen a szinten , és csak CSS-t használva kirajzolta az Opera új logóját. Őszintén szólva ettől azért leesett az állam. Ne…

Trackback: Opera logó CSS-ből -Érdekesség :) 2010.03.30. 05:52:47

Eddig is tudtam, hogy CSS-sel csodákat lehet tenni (erre remek példa a CSS Zen kert millió példája). David Desandro viszont túllépett ezen a szinten , és csak CSS-t használva kirajzolta az Opera új logóját. Őszintén szólva ettől azért leesett az állam. Ne…

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

MosoMasa 2010.03.29. 20:31:28

Mondjuk a hsz oldal nem egészen stimmel!
Szétesett.
Nálam a ff 362 is kockát mutat.

Ezek szerint a 10.5 sem jeleníti meg helyesen? Gondolok itt az árnyékolásra pl.
Ez azért kicsit ciki, hogy a saját logóját nem tudja.
Amúgy érdekes!

Karbonade · http://magyaropera.blog.hu 2010.03.29. 20:50:36

A blog.hu valami hülyeséget generált a cikk oldalára, érdekes módon a főoldalon minden rendben volt, ezért is tettem ki. Megpróbálom helyrehozni...

FunTom8 2010.03.29. 21:00:54

ujra itt. Ubuntu linux Opera 10.10 olyat csinált mint az IE :-/ a ff 3.5.8 pedig mint az Opera 10.5 a kép szerint. Persze ff-ből kommentelek :(

Karbonade · http://magyaropera.blog.hu 2010.03.29. 21:03:46

Most jó lett elvileg. A blog.hu motor valahogy szétcseszte az üres div-eket.

Karbonade · http://magyaropera.blog.hu 2010.03.29. 21:07:08

@FunTom8: A windowsos 10.10 is rosszul jeleníti meg.

bond4ever 2010.03.29. 21:13:39

Nálam windowson Opera 10.51-el jó, Chrome 4.1 nincs árnyék, FF 3.6.2 és IE8 a képen az utolsó.

FunTom8 2010.03.29. 21:13:45

Ha frissítem az oldalt Operában, már be tudok lépni a kommenteléshez. Ki érti ezt :-O

MosoMasa 2010.03.29. 21:15:10

@Karbonade: Valami nem stimmel még mindig. Az eredeti oldal helyesen jön be, de amit beillesztettél az ff alatt is kocka, és crome alatt is árnyékmentes - holod az eredeti oldalon az is jó.
Szerintem csak linkelj.

David_K 2010.03.29. 21:50:37

Alul van árnyék, ellenben az alsó felén, az az enyhe árnyékolt színátmenet nincs meg, pedig a referencia szerint a Chrome és a Firefox is helyesen jelenítette meg. Hol az igazság?

Opera 10.51, win 7.

Karbonade · http://magyaropera.blog.hu 2010.03.29. 22:00:48

@MosoMasa / Ha nagy leszek, japán leszek!: Lehetséges, hogy valami más stílus bekavar az oldalunkról, azért van a különbség. Emiatt viszont már nem veszem le, ez csak egy érdekesség, nem különösebben életbevágó.

madve2 2010.03.29. 22:03:13

Sajnos ez csak addig hangzik ennyire jól amúgy, amíg az ember meg nem nézi a kódot, amivel készült.

Operával nézve nem azért nincs színátmenet (árnyékolás, csillogás, ki hogy hívja), mert bénák voltak a fejlesztők, hanem mert renderelőmotor-specifikusan van megadva, pl.

"background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%,
#800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
color-stop(50%, #E71616), color-stop(80%, #800000),
color-stop(85%, #800000), to(#b80304) );"

Nézzétek csak meg az eredeti oldalon...

Ennyit a "szabványokról" meg a "szabványkövetésről" meg... a többit tudjátok =)

Karbonade · http://magyaropera.blog.hu 2010.03.29. 22:24:19

@madve2: hehe, én ezeket a trükköket nem másoltam át, ezért nem mennek rendesen.

MosoMasa 2010.03.29. 23:15:41

Hát még ez sem az igazi. Ez ugyan szépen megjelenik, de nem ez a logója az operának.

Karbonade · http://magyaropera.blog.hu 2010.03.29. 23:54:04

De igen, ez a logója. Nyilván nem PONTOSAN ez, de nem is ez a célja, hogy pixelpontosan leutánozza a logót...

zsüi_ 2010.03.30. 00:20:19

Érdekes.. az eredeti kódban nincs benne a szabványos csillogó rész? Pont az zavart amikor ezt először megláttam, hogy ezt az Opera nem tudja. Ezek szerint csak David Desandro úr hagyta ki belőle? Nem szép tőle :) Az ő oldalán továbbra sem 'jó'.. először azt hittem, hogy volt valami css beli fejlesztés a 10.50 és a 10.51 között ami fura is lett volna.

MosoMasa 2010.03.30. 01:12:37

@Karbonade: Értem én, hogy az érdekesség a lényeg itt, a technika, tetszik is.
De mindettől függetlenül jegyeztem meg, szakmai szempontból, hogy nem ez az opera logója.
Ez csak hasonlít.
Sem az alakja, sem a színe, sem a faktúrája nem stimmel.
A opera logó így néz ki: promote.opera.com/logos/Opera-icon-high-res.png

zsüi_ 2010.03.30. 01:24:19

Nézegettem kicsit a kódot. Jól látom, hogy a webkitesek és mozillások gradienttel, míg a szabványosok belső árnyékkal oldják meg a 'csillogást'? Ezt valaki közületek rakta bele?

penge™ · http://www.thevenusproject.com/ 2010.03.30. 01:28:35

Nem rossz, csak a zoomolás lassú. Akkor már inkább SVG.

@zsüi_: Én is úgy tudtam, hogy az Opera nem támogatja a CSS gradients-et.

A W3C meg nem is értem hogyan hagyhat jóvá olyasmiket, mint -WEBKIT-border-radius vagy -MOZ-border-radius

Most akkor ahány böngészőmotor annyiféle elnevezés lesz???

penge™ · http://www.thevenusproject.com/ 2010.03.30. 01:32:07

@zsüi_: Gondolom Karbonade a Choose Operás logót rakta be, amit Hakon Wium Lie csinált: my.opera.com/chooseopera/blog/2010/03/17/opera-logo-in-css

Baldric2 2010.03.30. 05:45:57

@penge™: általában ezt a böngésző specifikus kódot akkor használják, ha még nem teljesen szabványosan jelenítik meg az adott hatást, vagy a szabvány még változik, így ha később már minden végleges lesz, és esetleg máshogy fog működni mint most, nem fog bezavarni a most elkészített oldalaknál.
Az opera is használja ezt a módszert, csak az -o- jellel, és a border radiusnál erre már épp nincs szükség, mert ez már elvileg végleges, legalábbis az opera részéről.

Karbonade · http://magyaropera.blog.hu 2010.03.30. 08:20:14

Úgy látom, ez is átment valami versenybe ... :) Nézzétek meg ezt a kódot, ez már csak három div, még kevesebb CSS, mégis rohadt jól néz ki. helmersworks.com/demo/opera_logo.html

Dzsini 2010.03.30. 08:37:41

akkor most lássuk az összes többi böngésző logoját ugyanígy létrehozva.

ap · http://premiumlivesets.hu 2010.03.30. 09:17:21

hmmm... érdekes... nálam a alábbi módon jelennek meg:

Chrome:
kepfeltoltes.hu/100330/chrome_www.kepfeltoltes.hu_.jpg

IE8:
kepfeltoltes.hu/100330/ie8_www.kepfeltoltes.hu_.jpg

Safari:
kepfeltoltes.hu/100330/safari_www.kepfeltoltes.hu_.jpg

Firefox:
kepfeltoltes.hu/100330/firefox_www.kepfeltoltes.hu_.jpg

Opera:
kepfeltoltes.hu/100330/opera_www.kepfeltoltes.hu_.jpg

Ezek alapján ellentétben a cikk alján szereplő bemutatással, a chrome, safari, ff trió úgy jeleníti meg ahogy az operánál jelzi, az opera meg úgy ahogy az előző triumvirátusnál jelezte :)

MosoMasa 2010.03.30. 09:29:32

@ap: Ide másik kód van berakva, mint a tesztben szereplő. Nézd meg az eredeti oldalt.

penge™ · http://www.thevenusproject.com/ 2010.03.30. 09:31:32

@ap: Mivel ide a valid kód van berakva, amit Hakon Wium Lie csinált, az eredeti oldalon pedig az árnyékolás nem szabványos.

ap · http://premiumlivesets.hu 2010.03.30. 10:28:49

@MosoMasa / Ha nagy leszek, japán leszek!:

@penge™:

Akkor meg mit vagizik? Szabálytalan kódot én is tudok írni ;D

Darkcomet 2010.03.30. 11:42:23

Nálam 10.52-6272-es linuxos snapsot alól normális a logo, de a final 10.10-es alól (ugyan csak linuxos) szép szögletes, magyarán négyzet.

zsüi_ 2010.03.30. 11:42:53

@Baldric2: Úgy emlékszem, hogy próbáltam annak idején az -o-border-radius-t de nem működött. Volt olyan, ahol azt írták, hogy úgy fog majd menni, de én nem emlékszem, hogy lett volna olyan verzió. Valójában egyébként engem zavart a tény, hogy lezárták a Presto 2.3-at 2009 októberben és ennek ellenére 2010-ben jött ki az a böngésző ami támogatja a border-radius-t.. más böngészőknél szerintem ilyenkor nem szaroznak. Új motor be, update, verziószám egy x.y-ról x.y+1-re ugrik és kész. De nem így történt és ez az, amit nem értek meg. Mit fájt volna nekik ez?

penge™ · http://www.thevenusproject.com/ 2010.03.30. 12:05:54

@zsüi_: Nem tudom, gondolom így még nagyobbat akartak durrantani. Az Opera így is rohan a verziószámozással, tőlük csak a Chrome ami gyorsabb, de azt felesleges is említeni, mivel ott 20%-os gyorsulás valóban megduplázza a böngésző értékét. :D

Így legalább annyi haszna volt, hogy már élesben lehetett látni egy csomó oldalon a border-radius-t, míg régebben mikor az Opera vezette be a specifikációkat akkor gyakorlatilag különböző teszteket kellett guglizni, hogy egyáltalán kipróbálható legyen, tehát felhasználói szemszögből értelmetlen volt, webfejlesztői szemszögből pedig megint, maximum annyi, hogy lehetett írni a látogatóknak, hogy ha Operát használtok, akkor vannak ilyen-olyan dolgok az oldalon. Kétlem, hogy túlzottan meghatotta volna őket. (Bár amennyire egyesek szeretik a csilivilit, a képírós MSN-es társaság biztosan zabálta volna a lángoló CSS3-as fejlécet :DDD) Szóval ha stabilan ment volna a böngészővel akkoriban az iwiw, myvip, freemail és társai akkor biztos lehetett volna pár embert szerezni vele, ha egy ilyen látogatói összetételű oldalon valaki így kampányolt volna az Operának.

Igazából a HTML5 videó jobban zavart, mert azt szerettem volna kipróbálni, aztán mire implementálták addigra a thevideobay.org már megszűnt.

De hát üzleti taktikának mindenképp előnyösebb, hogy nem fordít felesleges erőforrásokat egy marginális részesedésű böngésző ilyesmikre amíg a nagyok közül legalább az egyik nem implementálja.

zsüi_ 2010.03.30. 12:40:06

@penge™: Azért én úgy látom, hogy pont az van, hogy a többi böngésző is megindult a szabványok felé (ie persze szánalmas a 9-essel is), és pont amikor végre arra fújna a szél, amerre az opera is jól csinálja, hirtelen változtat a taktikán. Rendben van, hogy nem fejlesztik fölöslegesen, de kifejlesztették, ráfordították az erőforrásokat, csak hagyták hogy ott álljon a polcon. A többi böngésző meg tudta a radius-t, persze csak a saját maguk verzióját, de a user nem azt látja. A coder meg úgyis beletolja a kódot a css-be ha van mit beleírni. Ha két féle böngészőnek külön kód kell, akkor már egy harmadikat és negyediket is bele fog írni. Másfelől azt a taktikát sem értem, hogy tudják a border-radius-t, és mégse működik csak előtaggal, holott már kint van a szabvány.. éljen a chrome, éljen a fox!

zsüi_ 2010.03.30. 12:42:41

Más: Itt külön öröm látni, hogy valakik ráfordították azt a plusz időt és Opera-féle 3d-s megoldással is kipróbálható (lesz) a demó: gyu.que.jp/jscloth/touch.html

zsüi_ 2010.03.30. 13:02:43

@zsüi_: Bocs, hogy floodolok.. kipróbáltam az előbb említett demót a labs.opera.com/downloads/ oldalon található 3D canvas and File I/O preview build-del, és nem kicsi a sebességkülönbség az akkori 2d motor és a 3d között, talán egy kicsivel gyorsabb a mostani 2d változatnál is, viszont az anti-aliasing mintha nem működne olyan jól.

Nameless® · http://dirtywindows.hu/ 2010.03.30. 13:30:02

Nekem egy szép nagy TÉGLA VAN :D:DD I.E. 8 POWA

penge™ · http://www.thevenusproject.com/ 2010.03.30. 13:48:38

@zsüi_: Hoppá, nekem a 10.52-nél azt írja a 3D, hogy nem támogatott. Ne már...

zsüi_ 2010.03.30. 13:50:15

Bizony ez még nincs beépítve. Csak azt a régi snapshot-ot tudod használni kipróbálásra amit linkeltem.. szerintem a vegára várnak. Megintcsak egy olyan dolog ez, amit fentebb írtam.

zsüi_ 2010.03.30. 13:53:53

@penge™: De azért hogy nagyon ne keseredj el, amikor legutóbb próbáltam semelyik böngésző sem tudta a 3d-t.

penge™ · http://www.thevenusproject.com/ 2010.03.30. 14:25:29

@zsüi_: Azóta megnéztem, egyik sem tudja, IE9 sem, bár FF-ből jelenleg csak a 3.6 van fent. Annyira nem keseredtem el, ez a 2D minőség is meglepett. Az élsimítás néhol tényleg nem a legjobb (bár a Chrome-ban csúnyább), de ezen a minőségen egy belsőnézetes FPS-t is bőven el lehetne játszani. Passziánszra meg Mario-ra már eddig is bőven jó volt a Canvas, úgyhogy semmire sem kell már köcsög Flash. :D

Silverlight alig van valahol az MS-es oldalakon kívül. Még a Java-nak kéne kipusztulnia aztán mindjárt sokkal boldogabb hely lenne az internet. :)))

Nameless® · http://dirtywindows.hu/ 2010.03.30. 14:33:57

a képeken alul azér mégis az operába a második legrondább kép. de miért?

szégyen :D:D

Karbonade · http://magyaropera.blog.hu 2010.03.30. 14:50:17

@Namelesske: olvasd el a kommenteket és megtudod miért. Nem szégyen az.

F34R007 2010.03.30. 19:42:24

nekem normálisan jeleníti meg de csak operát használok az ie meg nagy kocka az egész xD

ezt nem bírtam megálni egy vicc a microsoft az ie 1 verzószámmal elveri az ösze böngészőt css3 ban acid-ba meg kap 55 pontot _0-
samples.msdn.microsoft.com/ietestcenter/

penge™ · http://www.thevenusproject.com/ 2010.03.30. 20:35:38

@F34R007: Az kamu táblázat: my.opera.com/haavard/blog/2010/03/17/microsoft-svg-table

Egyébként úgy rémlik, mintha 1-2 hete még 100% lett volna mindenhol.

Úgy látszik minél inkább sül a pofájukról a bőr, annál lejjebb kúsznak a százalékok.

F34R007 2010.03.30. 20:42:00

óóh penge :) tudtam én kössz hogy megerősítettél :P

HelloWorld 2010.03.30. 21:22:25

@penge™: Ezt egyszerűen megoldhatnák MS-ék: kiveszik azokat a teszteket, ahol IE9 bukik, és máris megvan újra a 100%
:)

penge™ · http://www.thevenusproject.com/ 2010.03.30. 21:28:29

@HelloWorld: De akkor vagy az összes 100% lenne, vagy nem maradna olyan teszt, amin az IE9 is átmegy. :D

zsüi_ 2010.03.30. 22:17:49

@penge™: Szánalmas amit az MS csinál. Csak ennyit tudok mondani. Kiváltképp hogy még büszkék is az acid 3 teszten elért eredményükre..

Dzsini 2010.04.01. 14:14:09

mire jók a szabványok:
rainbowdivider.com/
... a lap alján ott vannak a linkek, tényleg valid.

penge™ · http://www.thevenusproject.com/ 2010.04.01. 14:31:54

@Dzsini: És tényleg. Mondjuk az egész oldalon van egy háttér meg beillesztett gif képekkel van tele a validator pedig nem ellenőrzi a JS-t, a többit nem volt nehéz szabványosan megírni.

Egyébként másnál is szürke ezen az oldalon az Open With?