css3 « WordPress.com Tag Feed

Resize images with CSS - Keeping aspect ratio as it is

Shubhamoy — Thu, 17 Jul 2008 17:00:33 +0000

I found a quick and easy way to rezise images with CSS by keeping your image's aspect ratio. This is very quick you can use it in less than 5 minutes, lets proceed ;)

Lets say you want to show large images on your web page with maximum 200 pixels width, blog or forums just create the following css class into your styling css file:

.resize { width: 200px; height : auto; }

Read the full method @ SachinKRaj's Blog.

Opera 9.5 vs Firefox 3.0

WhiteDervish — Sat, 21 Jun 2008 09:25:46 +0000

Trzeba przyznać firmie Mozilla, że jej ludzie bardzo dobrze znają się na marketingu. Utworzenie czegoś takiego jak Download Day było naprawdę bardzo dobrym krokiem marketingowym. Powstał wielki szał na nowego Firefox'a. Czy Firefox jednak jest taki szybki, wydajny i bezpieczny jak wiele osób twierdzi? I tak i nie.

Pozwolę sobie przytoczyć dane z testów przeglądarek (Opery 9.27, Opery 9.5, Firefox 2.0.0.14, Firefox 3.0) z następującycyh stron internetowych:

Na początku porównam przeglądarki Opera 9.27 i Opera 9.5, bazując na danych z wymienionych wyżej testów:

Test                            | Opera 2.7 | Opera 9.5
ACID3 [%]                       |    46     |    83
Dojo 1.0.2 [ms]                 |   116     |    94
JQuery 1.2.3 [ms]               |   295     |   180
MooTools 1.2beta2 [ms]          |   304     |   116
Prototype 1.6.0.2 [ms]          |   406     |   180
JavaScript Performance Test [ms]|  1072     |   482.5
SunSpider Test [ms]             | 28775.4   | 10674.8
CSS3 Info selectors-test [%]    |    60     |   100
Dromaeo [ms]                    | 13593.5   |  2946.8

Teraz Firefox 2.0.0.14 vs Firefox 3.0:

Test                            | Firefox 2.0.0.14 | Firefox 3.0
ACID3 [%]                       |     52.5         |   71
Dojo 1.0.2 [ms]                 |    305           |  179.5
JQuery 1.2.3 [ms]               |    588.5         |  341.5
MooTools 1.2beta2 [ms]          |    241.5         |  173
Prototype 1.6.0.2 [ms]          |    393           |  312.5
JavaScript Performance Test [ms]|    890.5         |  317.5
Celtic Kane Test [ms]           |   1891           |  532
RockStar Test [ms] (średnia)    |      0.921416316 |    0.321248114
SunSpider Test [ms]             |  27172.4         | 5364.8
CSS3 Info selectors-test [%]    |      60.46511628 |   83.72093023
Dromaeo [ms]                    |   12589          | 2606.8

I na koniec Opera 9.5 vs Firefox 3.0:

Test                            |    Opera 9.5    | Firefox 3.0
ACID3 [%]                       |    83           |   71
Dojo 1.0.2 [ms]                 |    94           |  179.5
JQuery 1.2.3 [ms]               |   180           |  341.5
MooTools 1.2beta2 [ms]          |   116           |  173
Prototype 1.6.0.2 [ms]          |   180           |  312.5
JavaScript Performance Test [ms]|   482.5         |  317.5
Celtic Kane Test [ms]           |   375           |  532
RockStar Test [ms] (średnia)    |     0.516834861 |    0.321248114
SunSpider Test [ms]             | 10674.8         | 5364.8
CSS3 Info selectors-test [%]    |   100           |   83.72093023
Dromaeo [ms]                    |  2946.8         | 2606.8

Opera 9.5 vs Firefox 3.0 - 7:4 .

Opera 9.5 wygrała z Firefox 3.0 w siedmiu testach, a przegrała w 4. Widać, że Opera lepiej przeszła m.in. test ACID3 i CSS3. Świadczy to o tym, że przeglądarka ta lepiej spełnia standardy. Mozilla zresztą nigdy nie przejmowała się standardami. Wystarczy choćby wspomnieć, że Opera wydała przeglądarkę przechodzącą test ACID2 20 czerwca 2006 roku (Opera 9.0), a Mozilla 17 czerwca 2008 roku (Firefox 3.0) (niecałe dwa lata później!). Firefox za to szybciej interpretuje skrypty JavaScript, lecz o poprawności ich interpretacji można dyskutować. W końcu gorzej radzi sobie z testem ACID3, który jest "wypchany po brzegi" skryptami JavaScript. Lisek szybciej także interpretuje, ogólnie, kody stron internetowych. Szybciej jednak nie znaczy lepiej. To również widać w testach.

Przedstawiłem tu wydajność, zgodność ze standardami i szybkość przeglądarek. A co z bezpieczeństwem?
O bezpieczeństwie nie można jeszcze zbyt wiele powiedzieć, bo minęło zbyt mało czasu od wydania obu przeglądarek. Można jednak powiedzieć już coś o Firefox'ie: http://www.theregister.co.uk/2008/06/19/firefox3_bugs/. Luka ta została w nim znaleziona zaledwie godzinę po wydaniu aplikacji.
W Opera Browser 9.5 nie odnaleziono żadnego buga.

Czy Firefox 3.0 jest tak dobrą przeglądarką, jak twierdzi Mozilla? Jeżeli porównać Firefox 3.0 do Firefox 2.0.0.14, to rzeczywiście widać duże postępy. Jeśli jednak porównamy go do przeglądarki Opera 9.5, to nic specjalnego w nim nie ma. Ja jednak zostanę przy Opera 9.5.

A co można powiedzieć o przyszłości? Niewiele. Nie będę pisał o zamierzeniach producentów przeglądarek, bo jest to bez sensu. Ja wolę fakty.
Weźmy ACID3. Firefox 3.1 preAlpha w teście ACID3 zdobywa 80 punktów. Jest to o 9 punktów więcej niż Firefox 3.0, ale mniej niż zdobyła najnowsza, stabilna wersja przeglądarki Opera 9.5 - 83 pkt.
Za to testowa wersja WinGogi zdobywa w tym teście 100 pkt.

60 CSS Directories

Shubhamoy — Wed, 11 Jun 2008 18:33:09 +0000

Hi Friends,

Just check this out. 60 CSS(Cascading Style Sheet) Directories. I know you all will sure like this. So, don't forget to post your comments. :-D

60 CSS Directory

Get the full directory here.

CSS3: css variables are a bad idea. Just allow us to call other selectors.

rip747 — Thu, 10 Apr 2008 12:29:43 +0000

Everytime I hear about CSS3 allowing the use of variables, I cringe. I can tell right off the bat that this is an extremely bad idea and will be abused beyond belief.

One of the ways I propose replacing this up and coming feature is by just allowing us to call other selectors within a selector. I'll demonstrate:

<style type="text/css">
.bold {font-weight:bold;}
.blue {color:blue;}
.testingagain {selectors:.bold, .blue;}
</style>
<p class="testingagain">testing this out</p>

In the above code block the testingagain class would inherit the properties of both the bold and the blue selectors. Further more you could overwrite them, just as you do now.

<style type="text/css">
.bold {font-weight:bold;}
.blue {color:blue;}
.testingagain
{
selectors:.bold, .blue;
font-weight:normal;
}
</style>
<p class="testingagain">testing this out</p>

Hell, let's get jiggy with it:

<style type="text/css">
.cool {font-weight:bold;color:blue;}
.shout{background-color:red;text-align:center;text-decoration:underline;}
.testingagain
{
selectors:.cool, .shout;
font-weight:normal;
text-decoration:none;
background-color:yellow;
}
</style>
<p class="testingagain">testing this out</p>

Why I like this method

Because you can already do it now! You have to do it in the HTML like so

<style type="text/css">
.bold {font-weight:bold;}
.blue {color:blue;}
</style>
<p class="bold blue">testing this out</p>

With my proposed method it moves this into the css file for easier maintenance and readbility.

So what do you think?

Safari 3.1 για PC και Mac

altervedo — Wed, 19 Mar 2008 07:18:34 +0000

H Apple έκανε διαθέσιμη την έκδοση 3.1 του browser της Safari για PC και για Mac. Σύμφωνα με την Apple ο Safari, τρέχει 1.9 φορές πιο γρήγορα από τον Internet Explorer και 1.7 φορές από τον Firefox 2. Στον τομέα javascript αναφέρεται ότι ο Safari εκτελεί κώδικα 7 φορές πιο γρήγορα από τον browser της Microsoft και 4 φορές από τον browser της Mozilla. Σαν νέα χαρακτηριστικά αξίζει να σημειωθούν η υποστήριξη των CSS3 Web fonts και τα νέα tags για audio και video που συμπεριλαμβάνονται στο HTML 5. Υποστηρίζονται επίσης animations CSS.

HTML5 and CSS3

Dominik — Thu, 06 Dec 2007 09:06:05 +0000

Kyle Neath makes some good points about the future of HTML5 and CSS3. While CSS3 might work quite well, the missing backwards compatibility of HTML5 looks like a real bummer.

Resize images with CSS - Keeping aspect ratio as it is

sachinkraj — Thu, 17 Jul 2008 10:37:27 +0000

I found a quick and easy way to rezise images with CSS by keeping your image's aspect ratio. This is very quick you can use it in less than 5 minutes, lets proceed ;)

Lets say you want to show large images on your web page with maximum 200 pixels width, blog or forums just create the following css class into your styling css file:

.resize { width: 200px; height : auto; }

.resize { width: auto; height : 300px; }

Second class will resize the images by keeping height as 300 pixels. You can use the following classes in <IMG> tags like:

<img src="http://mywbsite.com/myphoto.jpg" class="resize" alt="my photo" />

The above solution is always better than putting width and height attributes into the <IMG> tag. Hope it works out for you too ;)

Anyways you can use any image re-size script with server side script technology like PHP. I am working on one of this kind of script which resize the images as you want. I will upload it with another article soon.

Αυτόματη προσθήκη -webkit-border-radius όπου έχετε -moz-border-radius

leaverou — Fri, 20 Jun 2008 06:18:25 +0000

Μέχρι να έρθουν οι μέρες που το CSS3 θα έχει φτάσει σε επίσημο specification που θα υποστηρίζεται από όλους τους browsers, είμαστε αναγκασμένοι αν θέλουμε να χρησιμοποιήσουμε κάποιο feature του να χρησιμοποιούμε proprietary properties του κάθε browser και να ξέρουμε ότι δεν πρόκειται το εφέ μας να φαίνεται ίδιο παντού (με ελάχιστες εξαιρέσεις όπως το opacity που πλέον το υποστηρίζουν όλοι εκτός από τον ΙΕ, ο οποίος όμως έχει αντίστοιχο filter και κάααπως παλεύεται).

Ένα τέτοιο παράδειγμα είναι και το border-radius. Επί του παρόντος, υποστηρίζεται μόνο από Firefox 3 και Safari 3 (υπάρχει και στον Firefox 2, αλλά τόσο άθλιο που δεν αξίζει). Προφανώς, σε περιπτώσεις που θέλουμε όπωσδήποτε κάτι να έχει στρογγυλεμένες γωνίες θα καταφύγουμε σε κάποιον από τους all time classic τρόπους (τεχνικές με background images, τεχνικές με javascript κοκ). Υπάρχουν όμως και περιπτώσεις που κάτι φαίνεται αρκετά όμορφο χωρίς rounded corners, και δεν θεωρούμε απαραίτητο να το φορτώσουμε με το extra markup που είται απαιτείται είτε παράγεται από όλες τις υπάρχουσες cross-browser μεθόδους για rounded corners. Σε αυτή την περίπτωση χρησιμοποιούμε proprietary css properties (-moz-border-radius, -webkit-border-radius). Μεγάλα παιδιά είστε, δεν χρειάζεται να σας επισημάνω τους "κινδύνους" από κάτι τέτοιο (πχ css που δεν περνάει το validation) σαν τις προειδοποιήσεις στα πακέτα των τσιγάρων. Όποιος το χρησιμοποιεί υποτίθεται ότι ξέρει γιατί το κάνει και ποιές είναι οι συνέπειες.

Ωστόσο ο σκοπός του παρόντος δεν είναι να αναλύσει τα αρνητικά και τα θετικά των τρέχοντων implementations του border-radius. Το παρόν post έχει σκοπό να εγκαινιάσει μια νέα κατηγορία στο blog: Dreamweaver find & replace regular expressions. Διαπιστώνω ότι πολλοί συνάδελφοι δεν έχουν ασχοληθεί με τα regular expressions ενώ πέρα από προγραμματιστική ευκολία μπορεί να τους βοηθήσουν να γλιτώσουν αρκετό χρόνο από βαρετά tasks. Έτσι, αποφάσισα στην κατηγορία αυτή να ανεβάζω διάφορα έτοιμα dreamweaver queries όταν κρίνω ότι πέρα από μένα, μπορεί να χρησιμεύσουν και σε άλλους.

Τα queries που ανεβάζω σε αυτό το ποστ αφορούν την προσθήκη -webkit-border-radius όπου υπάρχει -moz-border-radius.

Το πρώτο αφορά properties όπως -moz-border-radius:5px; ενώ το δεύτερο properties όπως -moz-border-radius:0px 0px 7px 7px;. Δυστυχώς δεν μπόρεσα να σκεφτώ κάποιο τρόπο να τα αντικαθιστά και τα 2 με ένα query λόγω ασυμβατότητας μεταξύ των implementations του κάθε browser. Για να ξεπεραστεί αυτή η ασυμβατότητα το πρώτο προσθέτει μια ιδιότητα ενώ το δεύτερο τέσσερις.

Το query μπορεί εύκολα να τροποποιηθεί για να προσθέτει και άλλες ιδιότητες, όταν δεήσει η Opera ή ο ΙΕ να ενσωματώσει border-radius (προς το παρόν, ειδικά το τελευταίο, είναι ανέκδοτο :()

Ελπίζω να σας χρησιμεύσει. Feel free να αναφέρετε οποιοδήποτε bug (μόνο μην μου πείτε ότι δεν δουλεύει για irregular curves ή shorthands με 2 ή 3 τιμές: Ο Mozilla δεν υποστηρίζει irregular curves ενώ δεν χρησιμοποιώ ποτέ shorhand με 2 ή 3 τιμές για την εν λόγω ιδιότητα, οπότε κάτι τέτοιο θα μου ήταν άχρηστο).

Opera 9.5 com suporte ao Css3

Willy Fernandes — Thu, 19 Jun 2008 18:31:54 +0000

Buenos dias,venho contar mais uma novidade é o navegador Opera 9.5 lançado recentemente, mas o interessante é o suporte ao Css 3:

@media queries
text-shadow
-o-background-size
opacity
hsl colours
overflow-x & overflow-y
all css selectors
form pseudo-classes

Agora falta os outros navegadores se adequarem para começarmos a usar o css3, algo que vai demorar bastante ainda.

Mais informações sobre o CCS3 visite, http://www.css3.info/

.willy

60 CSS Directories

Shubhamoy — Wed, 11 Jun 2008 18:20:37 +0000

Hi Friends,

Just check this out. 60 CSS(Cascading Style Sheet) Directories. I know you all will sure like this. So, don't forget to post your comments.:-D

60 CSS Directory

Update:

css.wearethebuzz.com

CSS2 and CSS3 selectors in jQuery

Paul — Tue, 29 Apr 2008 03:55:20 +0000

Along with dom traversal (ala CSS2), you can also use CSS2 and CSS3 selectors in jQuery. For example:

lb = $('a[rel="lightbox"]');

will get you all the anchor elements in the dom which have the rel="lightbox" attribute. This, however:

lb = $('a[rel*="light"]');

will get you all the anchor elements in the dom which have the substring "light" in their rel attribute.

What's the Open Web? Why does the Open Web Matter? Contest - Win Three Open Web Vancouver 2008 Tickets

Gerald — Wed, 02 Apr 2008 19:40:26 +0000

On April 14+15 the Open Web Vancouver 2008 conference will showcase open web technologies, communities and culture, and evangelize the Open Web to developers, designers, organizers and the community at large.

What's the Open Web? Good question. Tell us "What's the Open Web and Why It Matters" and win a free two-day Open Web Vancouver 2008 conference pass.

How the contest works: Write a posting answering the two questions:

What's the Open Web?
Why does the Open Web matter? Why is the Open Web important?

That's it. Publish your posting on your site, blog or elsewhere and than tell us about it to get short-listed for the free two-day Open Web Vancouver 2008 conferece pass. Choices include:

Add a comment with a link to your "What's the Open Web?" posting to this posting.
Add a comment with a link to your "What's the Open Web?" posting to the Open Web Vancovuer 2008 Upcoming event listing.
Add a wall posting with a link to your "What's the Open Web?" posting to the Open Web Vancouver 2008 Facebook event page.
Send a tweet (@openweb2008) with a link to your "What's the Open Web?" posting to the Open Web Vancouver 2008 Twitter.

Not interested in Open Web? As an alternative tell us "What's Web 3.0 / Microformats / the Semantic Web / the Giant Global Graph and why it all matters".

Questions? Comments? Send them along to the Vancouver Ajax & Web 2.0 (3.0) Developer Forum/Mailing List. Thanks!

Use CSS to hide messages or images

theolagendijk — Tue, 11 Mar 2008 11:51:59 +0000

Erik Kastner found an interesting use for "CSS3's selection pseudo element" (supported by Safari and Firefox) and devised a interesting hack that allows you to hide images in texts. You can make every kind of text hide every sort of image, the image will become visible when you select the text. Check out the example that I created, I mashed up a repetition of the text "Sylvia vliegt." (Dutch for Sylvia is flying) and a Flickr photo;

Is it a bird? Is it plane?

Go on make your own hidden images with the script Erik Kastner wrote "Text + Image + CSS3 = Crazy Delicious".

Fun Post: Highlight mit CSS Generator

noname — Fri, 08 Feb 2008 12:07:12 +0000

Auf dieser Webseite kann man sein eigenes Bild hinterm XHTML Text verstecken!

Fun Post: Highlight mit CSS

Text + Image + CSS3 = Crazy Delicious

Nuovi strumenti affascinanti

emaaaanuele — Thu, 07 Feb 2008 07:27:56 +0000

All'orizzonte sta vedendo la luce CSS3, che per chi non lo sapesse, è quello strumento che ci permette di creare le nostre pagine web (di qualunque natura) e renderle affascinanti.

Questo è un esempio di cosa si può fare

(selezionate il testo che compare)

Affascinante no?

Fun Post: Highlight mit CSS

noname — Wed, 06 Feb 2008 17:28:06 +0000

Bilder in HTML Texte verstecken mit CSS

Wieder eine Demonstration, was man mit CSS3 alles machen kann...

Fun with highlights

Wanting Feature as solution: CSS 4

solutionpress — Thu, 31 Jan 2008 21:34:12 +0000

Auch wenn momentan noch nichtmals CSS 3 richtig genutzt wird, oder ausreichent mit entsprechenden Interpretern ausgedeckt ist, gibt es für mich eine Funktion die mir sehr wichtig wäre, in CSS 3 ist sie nicht enhalten, wieso die Entwickler nicht darauf kommen ist mir unklar. Ich hoffe dieser Posting gerät also bis zu dem CSS Developer Team durch!

In meiner Funktion geht es darum bestimmte Standardwerte von bestehenden Elementen wie z.B. den Überschriften (h1, h2, h3, h4, h5, h6) auf null stellen zu können. Mittlerweile wird in den meisten Projekten insbesondere bei Qualitativen Webdesigns von Grafikern alle verwendeten Elemente noch einmal neu definiert, Yahoo bietet dafür auch eine vorgefertigte reset.css an, die man nach dem Download kostenlos nutzen kann, sowas geht bei großen Webseiten aber deutlich auf die Performance, was man mit meiner Funktion lösen könnte.

Genannt sollte sie reset werden. Hier die möglichen Werte und deren möglichen Folgen:

reset: all; Setzt alle Standartwerte auf 0!
reset: h; Setzt alle Überschriftsvarianten (h1, h2, h3, h4, h5, h6) auf 0! Das sollte auf alle anderen Inline Elemente genauso anwendbar sein.
reset: margin; Setzt alle Außenabstände auf 0.
reset: padding; Setzt alle Innenabstände auf 0.
reset: h1; Setzt nur das angeführte Element auf 0. In diesem Falle h1!
reset: ul; Setzt alle Listenstandardeigenschaften auf 0. Sollte wieder wie alles andere auch auf ähnliche Varianten wie li anwendbar sein.
reset: ul, li, a; Setzt alle Elemente zurück die aufgeführt wurden. Sollte mit Kommata getrennt werden.

Anwendbar soll diese Funktion größtenteils nur in dem * und body element. Für die restlichen Elemente gibt es nur die Variante reset: all;

Wenn entsprechende Interpretationen bei den Browsern kommen, und die dazugehörigen Informationen local auf den PC liegen wie sie es bei jeden Browser tuen lässt sich damit viel Sparen: Traffic, Performance Verluste, Speicher, Arbeit, Zeit gründe warum eine solche Funktion nicht eingeführt werden sollte bestehen nicht. Auch nicht nach längerer Überlegung. Ich kann mir Vorstellen das mit einer derartigen Funktion auch ein weiterer Schritt in richtung Barrierefreiheit gegangen wird. Saubere Printversionen einer Seite sind so deutlich schneller zu realisieren, auch eine Webseitenversion für Portable Internet Devices wie ein Handy könnte damit innerhalb von wenigen Sekunden erstellt werden!

Also liebes CSS Developer Team, schaut euch diese Idee mal ernsthaft an. Die Leser dieses Blogbeitrages bitte ich durch Posten eines kleinen Linkes oder Trackbacks diesen Beitrag zu unterstützen, und Aufmerksamkeit zu gewinnen.

Does Adobe AIR Matter?

blueclock — Thu, 24 Jan 2008 16:23:35 +0000

I've been putting together an article about why web browsers are so important for publication on another web site and it's really made me think about the implications of AIR for the web.

The web is all about content, right? And to access the content we need to start somewhere. A search engine, a bookmark, a URL we've memorised. These all require us to fire up a web browser. Web browsers are our window onto the web.

Interrupting The Search Chain

Our start page in our web browser influences what information we will find, what tangents we go off on and what advertising we view.

At the moment, if I want to check my Google analytics account, I fire up my browser. Now, Analytics isn't my home page, Google is, and I've got a couple of news feeds on there so there's scope to go off at a tangent.

Applications like the Analytics Reporting Suite built in AIR would just deliver you straight there.

Is this better? Is it worse? Neither. It's just different. It's only subtle, but it is different. Content is certainly still King, but will the web browser remain the gatekeeper?

Like RSS feeds, desktop applications such as those built using AIR will help us interact with the web without necessarily going "on" the web. That opens up another battle ground for the search engines and advertisers.

The Acceleration of CSS3 Adoption

For AIR developers of the HTML variety (as opposed to the purely Flash/Flex variety) AIR could be a bit of a playground.

For once, we will know exactly how our HTML will render, because AIR uses WebKit as its rendering engine. While that's nice because it places us in a hitherto unknown Utopia of only having to deal with one "browser", stripping away a whole layer of testing and potential compromises, it's also important for another reason.

WebKit is leading the field in implementing CSS3 features. AIR applications could well be the proving ground for the new CSS3 techniques that we will all have to learn.

The iPod Effect

AIR apps are pretty. AIR apps are nicer to use than most web apps. AIR will be cool. That can go a long way in the adoption of a new product whether it's any good or not.

Like the iPhone, I think AIR will have a ripple effect on the landscape, not by dominating the market, but by setting the tone and by setting client expectations.

Nobody expects Apple to trounce Nokia, but all of the major mobile manufacturers have to follow Apple's lead, at least for the immediate future.

AIR Matters Because Adobe Matters

Finally, AIR is being delivered by Adobe and since their acquisition of Macromedia, Adobe have become the web company. That could have gone horribly wrong, but they have improved many of Macromedia's products and made important decisions in standardising formats and handing over technologies to the web community.

They are also putting efforts into making sure that Flash and AIR are going to be on a par for Linux which not only matters on the desktop, but in the plethora of mobile web devices out there.

Adobe seem to be simultaneously reading the future of the web correctly and managing to shape it and that has to be a recipe for success.

2008 Web 3.0 GGG

benjamin-nicolau — Sun, 30 Dec 2007 11:12:13 +0000

2008 - Web 3.0 - GGGTim Berners Lee, recognized as founder of Internet and the director of the Consortium World Wide Web (W3C) thinks that next step in the Internet evolution is the GGG.After Internet, Web 2.0, semantic Web, now the time would arrive from Giant Global Graph (GGG), with CSS3, HTML5, and XHTML 2.GGG is integrate information, semantics, users and interests of users.2008 will be Web 3.0.http://dig.csail.mit.edu/breadcrumbs/node/215

#mce_temp_url#