Giter VIP home page Giter VIP logo

purecss-francine's Introduction

Pure CSS Francine

An ongoing series in which I create art using only CSS and HTML.

Rules I have for myself:

  1. All elements must be typed out by hand
  2. Only Atom text editor and Chrome Developer Tools allowed.
  3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor. (Note: at one point I was using one or two SVG elements but I eventually grew tired of them and they've since been deleted, so this rule no longer applies. No offense to SVG.)

Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

cyanharlow.github.io/purecss-francine

alt text

purecss-francine's People

Contributors

cyanharlow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

purecss-francine's Issues

Amazing

Sorry if this is wrong spot to write this, but what you have made is absolutely jaw-dropping and an amazing piece of work!

Please add 5 more lines to index.html

This would bring the total lines form 1,332 up to 1337 which would add a nice Easter egg showing how 'leet this project is! Congratulations on an accomplished work of art!

So Incredibly Creative!

I had no Idea this sort of thing could even be done! I'm just a code baby ... ummmm no I take that back ...a code embryo. This is so fabulous I'm glad I decided to enter this world of wonder.

What is your process for doing this?

Really interested to know how you structure putting this kind of thing together. Do you have a write up on how you approach this?

I'm finding it interesting going through with developer tools turning the styles on and off to see what you are doing. But seems daunting to think how you'd plan all of this!

How many hours did it take to put together?

Either way, Super cool

inconceivable

i had to search dictionary for another word instead of amazing, because amazing is too small to describe what i just saw

Works fine in Firefox and Safari

In your README you say it only works in Chrome. Well, it works identically in Firefox, Safari, and even MS Edge. Since you're mostly using CSS transforms, border radius and gradients, all modern browsers handle these identically. IE on the other hand is a different story. But it is a discontinued browser. Edge is evergreen like other modern browsers. Please update your README to reflex that other modern browsers can indeed render your work as expected.

Glitch mode

Amazing stuff. Truly is! I Had to have some fun with it though and started to play around with silly JS in the console. Here's something to get you started, post your own ones too!

setInterval(() => document.querySelectorAll('div').forEach(item => {
item.style = 'transform: translate('+Math.random() * 10+'px,'+Math.random() * 10 +'px)'}), 1)

CSS syntax error in francine.css

Found this syntax error in francine.css while checking with CSS HTML Validator:
.feath.feath20{r:ight 37%;width:88%}

Probably should be:
.feath.feath20{right: 37%;width:88%}

No issues

Just wanted to say that this is Incredibly well done!

Respect to pure art

thanks for showing on github, this is incredible amazing. I shall get to know more about css now, hahahaha

Does not work in IE7

The painting looks like a child drew it in IE7.
Browser: IE7
Os: Windows 98

gbumphb

Seriously though, well done!

NB

你真NB

CSS syntax error in francine.css

Found this syntax error in francine.css while checking with CSS HTML Validator:
box-shadow:0 0 2px 3px #821818)

Probably should be (remove right parenthesis):
box-shadow:0 0 2px 3px #821818

Why?

Just tell me please!

fantastic

ps : The author is very beautiful

Works like a charm on nearly on all browsers

Tested on Chrome 66.0.3359, Edge 42.17134 and Firefox 60.0.0.

I've started from Firefox 59.0.2 but had issues with the bottom part of the image. Just updating to the latest version solved the issue.

Really a great piece of art and code.

Tree?

I'm curious what the story is behind the tree which exists in HTML, but not in CSS. Looks like it was added in this commit: cf1e17e

Duplicate meta description tag in index.html

Checking with CSS HTML Validator I found that this meta tag appears twice in index.html (there's no need for it to appear twice):
<meta name="description" content="Pure CSS Oil Painting - by Diana Smith aka cyanHarlow" />

Mind-blowing!

Nothing has blown my mind to this extent.
Hats off!

I didn't even know this was possible!

Amazing work, I do realistic pencil portraits and they take me 15+ hours to finish. How long did this take you? I can't even imagine how hard this is and how much hard work it took from you to get to this level of HTML & CSS manipulation. Congrats!

Author|Picture

Hello

Would you please name the author of original picture?
Maybe link to Wikipedia article about it?

Suggestion: Add some animations

I have a suggestion . You can add some animations to make her eyes blink, mouth smile and give her a makeup process.
If possible, I want to pull this request. I have forked it.

I am so admire you.

How

You should totally write about how you built this!

Timelapse

You should make a timelapse where you take a screenshot of every commit.
like,
for i in commits:
check out commit
take screenshot

and then post it like, as a mp4 or something.

You know, for Science...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.