Projects

Here you’ll find a list of tools, libraries, polyfills and other kinds of open source scripts I’ve developed over the years. Some of them only work in recent browsers. Also, obviously if you use a tool to help you with an experimental CSS feature, it probably won’t work in browsers that don’t support that feature.

Contrast Ratio

Contrast Ratio is a modern tool for testing whether a combination of colors passes WCAG 2.0. It accepts any CSS color the browser accepts, including semi-transparent colors, color keywords, HSL(A) colors and the like. You can also share color combinations with others by just sharing the current URL.

Prism

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Dabblet

An interactive CSS playground. Pretty much my most successful project so far, with thousands of visitors every day.

Animatable

A CSS transitions gallery that shows what’s possible with even the most basic of transitions: one property, two values.

-prefix-free

-prefix-free is a library that allows you to write standard, prefix-less CSS and have the necessary prefixes added on runtime. It uses feature detection for almost everything.

cubic-bezier.com

A tool that helps you work with the easing functions of CSS3 transitions & animations and share them with others.

CSS.coloratum

A tool that helps you convert between the different CSS-accepted color formats (including name keywords) as well as share them with others.

CSS3 patterns gallery

An interactive gallery that demonstrates what’s possible with just CSS gradients. It also allows you to edit the code, to experiment with gradients yourself.

Chainvas

Chainvas is a tiny generic chaining library that can make any API’s methods chainable (like jQuery). Official plugins for the DOM and the Canvas API included.

Incrementable

A script that enables incrementing/decrementing multiple numeric values in textfields with the keyboard arrow keys.

CSSS

My popular slideshow framework, built exclusively with open web technologies. Includes plugins for editable CSS regions, syntax hightlighting and more.

rgba.php

A server-side script that automatically generates semi-transparent PNGs to be used as fallbacks for RGBA colors.

  • Pingback: Adrian Parr's Blog » Blog Archive » HTML, CSS & JS Online Code Editors/Playgrounds

  • Pingback: CSSquirrel : Goggles Are In | opinions and news on web design by Kyle Weems

  • rex_mizan

    Great works!!

  • Phil

    Love your Work! Thank you!

  • http://www.facebook.com/keonne Keonne Rodriguez

    You’re pretty amazing Lea. This is an awesome body of work.

  • Pingback: Adrian Parr's Blog » Blog Archive » -prefrix-free

  • Eduard Gotwig

    Hey, might you please take a look at http://tantaman.github.com/Strut/web-dist/index.html ? its an web based editor for presentations, realized with impress.js as library.

  • http://twitter.com/Raymandesign Rayman Design

    Congratulations Lea V is cool this work

  • Pingback: Site under construction » Sample Page | frank hague

  • sd

    dsfsdsd

    • df

      dfdf

  • Tom

    How old are you? You don’t waste time right?

    • http://lea.verou.me/ Lea Verou

      26. Oh I waste plenty of time :) Wasting time is the best way to get new ideas ;)

      • Aklavya

        It just awesome ! ..and looking coolest all of your project…… Lea .. I Salute your work…. i really get newest idea by giving time to your website..Thanks.

      • http://twitter.com/SATYABRATAA SATYABRATA DALAI

        now i am thinking to waste time more more times ..to get new ideas….

      • http://www.facebook.com/WeslieKhan Weslie Khan

        I thought I was the only one doing that…best of luck

      • Danu

        woman can never pass the age 26 :P

      • Eddy

        Seeing that you are only 26 and have accomplished so much has inspired me to accomplish even more by the age of 25. Thank you for this.

      • Govind Yaswanth

        She had started her technical life from the stage, when we are still fighting with graduation.

        She started her technical life in her diploma itself

      • http://www.bixal.me/ Bilal Khoukhi

        Are you still 26?

        • http://lea.verou.me/ Lea Verou

          As you can see, that comment was posted over a year ago. I don’t have time-stopping superpowers :P

        • http://www.bixal.me/ Bilal Khoukhi

          I also saw a comment by someone say that women can never pass 26 :P , Plus I saw your pics, you don’t look 27 at all

  • Per Rosendahl

    Awesome work!

  • HaroonAbbasi

    Amazing list of work.

  • dhiran

    Great jobs!

  • shivam chopra

    You are pretty cool…!!! you’ve done amazing work.

  • http://www.facebook.com/arnoldroa Arnold Roa

    You are amazing!

  • Pingback: Wi Fi Horizon, use copoun inside

  • http://www.facebook.com/kkxlkkxllb 心吾

    膜拜大神!

  • http://www.facebook.com/people/Srirang-Gawli/804079285 Srirang Gawli

    Excellent Work Lea…

  • Gujaalboy

    I love you!

  • <OMG

    Amazing works Lea , youre amazing girl too.

  • Pingback: Clean and Simple CSS Patterns | The Jeremy Moss

  • Jayme Cousins

    I bow before the brilliance!

  • http://www.facebook.com/cocotopia Jorge Luis Dueñas

    Congratulations :) you’re so amazing

  • Pingback: Dabblet : A project by Lea Verou

  • Barun Bhaumik

    I want to create blog section.Can you help me.please mail me.

  • Barun Bhaumik

    You and your thinking is cool. Are you 26. But your new ideas are too excellent for me.I am a web designer and I used your tutorial for my design.Many many thanks to you.

  • Barun Bhaumik

    I am wordless to appreciate you!!! You dont know what you have created for us, the wed designers cum developers. I personally appreciate you “carry on”.

  • rewrwr

    erqrw

  • http://www.facebook.com/kukreja.hemant Hemant S Kukreja

    What inspires you to do all this!! Everyone has a stoppage but it doesnt seems in your case!

  • Pingback: Personalities that Web Developers Should Follow to Get Helpful CSS Tricks

  • Joby Tom

    Great Works!

  • razaqnice

    superr

  • DanOwen

    Love your CSS3 Secrets slideshow. It’d be nice if you indicated Chrome compatibility.

  • Pingback: Персоналии: Lea Verou | GEEKFEMINISM.RU

  • MockingBird

    I love your works so much, Lea!!

  • tormahirtormahiri

    مەن سەل ھەيران قالدىم
    i wondering little bit

  • Pingback: What Are You Using? | DK Studio Home

  • Mampel

    Nice work Lea Verou!

  • Kshitiz Rimal

    your profile is inspiring, i knew about your projects but i didn’t know it was build by you. amazing collection

  • David Hc

    Dude, i love prefix-free.js :) a nice work. I free from hell now :p

  • carlos

    This it my new best place, Regards lea excelents work.
    Hug from the south of world

  • Bruno Gomes

    rgba.php Makes my life so much better. Thank you for that! <3

  • Patrick Matthews

    your site certainly taught me something new today!

  • Pingback: Notthatred | Dabblet

  • victor alfonso caballero cabre

    WTF HELLO FROM PERU, UR PROJECTS ARE AWESOME!!!

  • Marcelo Silva

    Amazing projects!!! Hugs.

  • tomjamescn

    So Greate Job!

  • Eriky Pessoas

    I’m your fan….
    Great works

  • Massimo Ivaldi

    I am admired: you are a great artist

  • Kareem Ahmed

    i think this list needs “colorzilla” http://www.colorzilla.com/ added to it they have the best CSS Gradient Generator i have ever seen on web

    • http://lea.verou.me/ Lea Verou

      As I thought was obvious, this list is projects I’ve made. I didn’t make ColorZilla, so no it’s not missing from the list. You just misunderstood what the list is about.

      • Kareem Ahmed

        i’m very sorry for that mistake .. i must have been excited to see lots of lovely tools in one place that i thought of adding another, and forgot to read the paragraph above :) .. again sorry

  • http://d-sign.name/ Alexander Wasilich

    Thank for the “prefixfree.js”!!!
    But what about “filter: greyscale (%);”

  • http://technoknol.blogspot.com/ TechnoKnol

    Awesome… It looks like you have Ph.D. degree in web developing :)

  • Pingback: Shaping CSS | Web Design Weekly

  • http://architektura.me/ Architektura Architekt

    chapeau bas

  • william otto

    you’re so cool, finding this now makes me sad about leaving the world of web design,,,

  • http://sociao.tumblr.com/ Chris Lowles

    Thank f**k I found -prefix-free

  • Pingback: AEA Notes – The Chrome Zone / Jay R. Wintermeyer

  • Pingback: Ensure contrast between your text and your background with right colors | HolaRails

  • Tho Vo

    Hi Lea,
    The link for corner shape is incorrect, could you please fix it?

    Thank you a lot for your hard working :)

    • http://lea.verou.me/ Lea Verou

      Fixed, thanks!

  • Andelina

    It is so cool,I like it!

  • Andelina

    This is my first time have saw so cool web,I really like it! I’m from China

  • Pedro Carvalho

    Your work is admirable both as in quality and quantity. Congratulations!

    • http://lea.verou.me/ Lea Verou

      Thanks!

  • JCinDE

    Saw your Play by Play on Pluralsight. Good stuff!

  • beagledog1

    Pretty good stuff.

  • Milad

    you are the best !!!!! im depressed now after seen your web site and portfolio !!!!

  • http://comshortcuts.blogspot.in/ Girish Balanagu

    Hi Leo verou, I have seen your Regex video its quite good. It’s so helpful to me. And your work on css and svg bit interesting. keep it up. :)

  • Annie Finch

    I am looking for a woman web developer/designer–someone very skilled and professional but fun to work with. Anyone know anyone looking for work?

    • http://lea.verou.me/ Lea Verou

      Why specifically a woman?! That’s gender discrimination.

      • Annie Finch

        Lea, if you are looking to debate on the topic of discrimination, you can do it here. http://boagworld.com/working-in-web/does-web-design-needs-positive-discrimination/
        To answer your question, here are my reasons for looking specifically for a woman:
        1. I run a woman-centered company so it seems appropriate.

        2. I enjoy working with women. When it is a good match, working together can flow delightfully and feels easier for me, generally speaking (of course there are always exceptions!) than working with men.

        3. I’d like to do my part to encourage more women in web development.

        • http://lea.verou.me/ Lea Verou

          Discrimination is discrimination and cannot be positive. Discrimination is losing out on opportunities because of a characteristic you don’t and can’t control (e.g. gender) and it applies here just as much. “Positive discrimination” is an oxymoron. Not to mention that it hurts both genders. As a woman, if I realized I was hired somewhere instead of somebody more capable because of my gender I would be extremely pissed off.

          Also, it seems extremely hypocritical to talk about diversity and want to hire exclusively women. That’s not diversity, that’s the same kind of gender monoculture that we are trying to fight.

          If a man wrote exactly the same thing you just did, about his gender, we’d call him a sexist pig. Can you even imagine the repercussions if a man said this:
          “I run a man-centered company so it seems appropriate.
          I enjoy working with men. When it is a good match, working together can flow delightfully and feels easier for me, generally speaking (of course there are always exceptions!) than working with women.”
          What makes you different? Why should a man fight feeling like this and adapt to working with women but you don’t have to? Does being a woman give you a free pass for this sort of thing?

          Lastly, maintaining a female-only bubble doesn’t “encourage more women in web development” or in tech or anything. People outside the bubble still have the same skewed impression about women in the field. Women that depend on the bubble to thrive will still feel uncomfortable participating in the wider industry, going to conferences, meeting colleagues. It’s not a solution, it’s an ugly hack masking the problem. For true change to come, you need all genders interacting with each other, not segregation.

          If anything, this is probably illegal too, and for good reason.

        • Annie Finch

          Lea, Yes, many do feel that the historically black and historically female colleges don’t provide the most useful experience for students who will have to deal with the “real world.” But on the other hand, many students have found them EXTREMELY helpful, and without the historically women’s colleges, which educated so many important women leaders, it seems clear that women would not have gone nearly as far as we have. And there are certainly other groups in the U.S .that are only open to people of certain backgrounds–for example, there is the Cave Canem group for poets of African American descent. As a white poet, I am not allowed to teach in that conference or participate in it in any way. Technically that may be called discrimination from a narrow point of view, but I, like most people, believe it is a good thing from a broader point of view, because the conference provides a context in which people who are marginalized by the mainstream can become stronger, become more aware of their own identity without being drowned out by the mainstream, and end up doing their best work, which helps us all. I’m sure you are aware of this principle. It is generally called “affirmative action.” In the U.S., affirmative action is widespread and has proved extremely helpful in correcting social power imbalances (I see you are from Greece where the situation may be different.)

        • http://lea.verou.me/ Lea Verou

          It’s not just about dealing with the real world from the minority group, it’s also the issue of visibility of the minority group to the outside world. I.e. to put it in simple terms, if nobody in the industry ever sees women around because they’re too busy working in their own bubbles, guess what connection they will subconsciously make about women and tech.

          Also, LOLs at you explaining what affirmative action is and even putting it in quotes as if you’re introducing some term I’ve never heard of, because you read somewhere that I’m from Greece and started making assumptions. I wonder what’s the xenophobia-related equivalent of mansplaining?

          Btw, I don’t even live in Greece anymore, but that shouldn’t matter.
          I’d recommend a bit more travelling abroad, to realize that other countries are not as primitive as you have been brainwashed to think (and often are more developed than the US). Especially when it comes to gender equality, (Nothern) Europe is centuries ahead of the US.

        • Annie Finch

          Good point about visibility. I completely agree. At best, “strategic essentialism,” to use Gayatri Spivak’s useful term, should focus as a power-enhancing launch pad into the wider world, not as an isolating bubble.
          Actually I have travelled the world quite a bit compared to most Americans. And I’ve taught and administered people from many parts of the world. One thing I’ve noticed is that the unique history of race relations in the “lower 48″ states of the US–the influx of huge numbers of enslaved people at the very founding moment of the nation– has created a very particular climate which can be quite difficult for people from elsewhere–even from Hawaii and Alaska–to understand. These race relations and the best practices for engaging with them bear, to my mind, many similarities–both haunting and useful similarities -to relations between the genders. And affirmative action is no exception.

        • Annie Finch

          PS This video may be helpful–it addresses your more general question and clarifies how it is not simply a matter of reversing exactly what I wrote. Where the comedian says “reverse racism,” you can just replace it with the phrase “reverse sexism'; for his examples, just substitute examples from women’s experiences over the centuries. Best, Annie
          http://www.youtube.com/watch?v=dw_mRaIHb-M

  • ManiManishah

    Awesome Work (y)

  • Pingback: Lea Verou - ByPeople

  • piratehouse