Thursday, 6 June 2019

CSS DRAWING PHINEAS

 – by 23 comments
HOW TO MAKE PHINEAS CARTOON 
BY USING CSS

HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="face"></div>
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="p1"></div>
<div class="p2"></div>
<div class="ear"></div>
<div class="mouth"></div>
<div class="m2"></div>
<div class="sh"></div>
<div class="cut1"></div>
<div class="cut2"></div>
<div class="fault"></div>
<div class="eb1"></div>
<div class="eb2"></div>
<div class="eb3"></div>
<div class="eb4"></div>
<div class="teeth1"></div>
<div class="teeth2"></div>
<div class="error"></div>
<svg width="150px" height="150px">
<ellipse cx="70px" cy="75px" rx="60" ry="27">
</svg>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a0"></div>
<div class="aa"></div>
<div class="ab"></div>
<div class="ac"></div>
<a href="https://coding-greed.blogspot.com/2019/06/animating-android-pure-css.html ">
<div class="bow"></div>
</a>
<div class="final">
<b>CARTOON:</b> <b><font color="red">PHINEAS</font></b></div>
</body>
</html>
view raw phineas.html hosted with ❤ by GitHub
CSS:
body {
background:#14A5A2;
}
.face{
position:absolute ;
top:20px;
left:100px;
width:0px;
height:0px;;
/* background-color:red;*/
transform:rotate(-35deg);
border-top:80px solid transparent;
border-right:80px solid transparent ;
border-bottom:80px solid #F9DCCC;
border-left:80px solid #F9DCCC;
z-index:6;
}
.dot1{
width:4px;
height:4px;
border: black;
background:#D5A388;
position: relative;
top:83px;
left:80px;
border-radius:4px;
z-index:7;
}
.dot2{
width:4px;
height:4px;
border: black;
background:#D5A388;
border-radius:4px;
z-index:7;
position: relative;
top:80px;
left:95px;
}
.dot3{
width:4px;
height:4px;
border: black;
background:#D5A388;
border-radius:4px;
z-index:7;
position: relative;
top:85px;
left:85px;
}
.eye1{
width:50px;
height:30px;
background-color:white;
border:solid black;
border-radius:50px 50px 0px 0px;
transform:rotate(10deg);
position: relative;
top:55px;
left:120px;
z-index:8;
}
.eye2{
width:40px;
height:20px;
background-color:white;
border:solid black;
border-radius:50px 50px 0px 0px;
transform:rotate(10deg);
position: relative;
top:30px;
left:160px;
z-index:5;
}
.p1{
width:2px;
height:4px;
border-top:2px solid #123D60;
border-right:2px solid #123D60;
border-bottom:7px solid #123D60;
border-left:6px solid #123D60;
border-radius:12px 12px 12px 12px;
background:white;
position: relative;
left:135px;
top:10px;
z-index:9;
transform:rotate(-25deg);
}
.p2{
width:4px;
height:4px;
border-top:2px solid #123D60;
border-right:6px solid #123D60;
border-bottom:7px solid #123D60;
border-left:2px solid #123D60;
border-radius:12px 12px 0px 0px;
background:white;
position: relative;
left:175px;
top:4px;
z-index:5;
transform:rotate(15deg);
}
.ear{
width:15px;
height:15px;
background:#F9DCCC;
border: 0.5px solid black;
border-right:solid #F9DCCC;
border-radius:15px 15px 15px 15px;
position: relative;
top:40px;
left:98px;
transform:rotate(-45deg);
z-index:7;
}
.mouth{
width:0px;
height:0px;
/*background:red;*/
border-top:35px solid #C82D17;
border-right:35px solid #C82D17;
border-bottom:35px solid transparent;
/*border-left:35px solid black;*/
border-radius:50px 0px 0px 0px;
transform: rotate(-80deg);
position: relative;
left:172px;
top:15px ;
z-index:8;
}
.m2{
width:45px;
height:45px;
background:#14A5A2;
border:solid #14A5A2;
border-radius:45px;
transform: rotate(-5deg);
position: relative;
left:188px;
top:-34px ;
z-index:8;
}
.sh{
width:200px;
height:150px;
background-image: repeating-linear-gradient(/*repeats the set of gradient*/
to top, /*sets direction of gradient*/
#ffebac 0px, /*start point of color1*/
#ffebac 20px, /*stop point of color1*/
#fc9828 20px, /*start point of color2*/
#fc9828 40px /*stop point of color2*/ );
position: relative;
left:70px;
top:-35px;
}
.cut1{
width:90px;
height:210px;
background:#14A5A2;
position: relative;
top:-230px;
left:23px;
transform:rotate(25deg);
}
.cut2{
width:90px;
height:210px;
background:#14A5A2;
position: relative;
top:-450px;
left:200px;
transform:rotate(-30deg);
}
.fault{
height:10px;
width:10px;
background:#14A5A2;
position: relative;
top:-610px;
left:265px;
}
.eb1{
height:20px;
width:20px;
border-radius:15px;
background:black;
position: relative;
top:-759px;
left:135px;
}
.eb2{
height:25px;
width:25px;
border-radius:15px;
background:#14A5A2;
position: relative;
top:-775px;
left:134px;
}
.eb3{
height:20px;
width:20px;
border-radius:15px;
background:black;
position: relative;
top:-795px;
left:180px;
}
.eb4{
height:25px;
width:25px;
border-radius:15px;
background:#14A5A2;
position: relative;
top:-812px;
left:175px;
}
.teeth1{
width:55px;
height:7px;
background:white;
position: relative;
top:-759px;
left:157px;
z-index:14;
transform:rotate(10deg);
border-radius:0px 0px 0px 0px;
}
.teeth2{
width:0px;
height:0px;
/*background:red;*/
border-top:5px solid white;
border-right:5px solid white;
border-bottom:35px solid transparent;
/*border-left:35px solid black;*/
border-radius:50px 0px 0px 0px;
transform: rotate(-250deg);
position: relative;
left:167px;
top:-757px ;
z-index:8;
}
.error{
width:20px;
height:10px;
background:#F9DCCC;
position: relative;
top:-780px;
left:153px;
z-index:9;
transform: rotate(50deg);
}
svg{
fill:#F86144;
position: relative;
top:-980px;
left:-13px;
transform:rotate(-48deg);
z-index:1;
}
.a1{
width:75px;
height:75px;
background:#14A5A2;
position: relative;
top:-1070px;
left:75px;
z-index:1;
border-radius:80px;
}
.a2{
width:10px;
height:70px;
background:#14A5A2;
position: relative;
top:-1070px;
left:75px;
z-index-1;
bor
}
.a3{
width:0px;
height:0px;
/*background:red;*/
border-top:10px solid #14A5A2;
border-right:10px solid #14A5A2;
border-bottom:35px solid transparent;
/*border-left:35px solid black;*/
border-radius:00px 0px 0px 0px;
transform: rotate(-292deg);
position: relative;
left:80px;
top:-1235px ;
z-index:26;
}
.a4{
width:0px;
height:0px;
/*background:red;*/
border-top:45px solid #14A5A2;
border-right:45px solid transparent;
/*border-bottom:45px solid red;*/
border-left:45px solid transparent;
border-radius:50px 50px 50px 50px;
transform: rotate(-50deg);
position: relative;
left:-15px;
top:-1270px ;
z-index:8;
z-index:26;
}
.a5{
width:85px;
height:85px;
border-radius:25px;
background:#14A5A2;
position:relative;
top:-1270px;
left:50px;
z-index:2;
}
.a6{
width:10px;
height:10px;
background:#F86144;
position: relative;
top:-1365px;
left:56px;
z-index:40;
transform:rotate(-47deg);
}
.a7{
width:0px;
height:0px;
/*background:red;*/
border-top:10px solid transparent;
border-right:10px solid transparent;
border-bottom:50px solid #14A5A2;
border-left:10px solid transparent;
position:relative;
top:-1370px;
left:35px;
z-index:2;
transform: rotate(10deg);
}
.a8{
width:0px;
height:0px;
/*background:red;*/
border-top:35px solid #14A5A2;
border-right:15px solid #14A5A2;
border-bottom:35px solid transparent;
/*border-left:35px solid black;*/
border-radius:50px 0px 0px 0px;
transform: rotate(-5deg);
position: relative;
left:25px;
top:-1422px ;
z-index:8;
}
.a9{
width:8px;
height:30px;
background:#14A5A2;
position: relative;
top:-1520px;
left:15px;
z-index:2;
transform: rotate(30deg);
}
.a0{
width:0px;
height:0px;
/*background:red;*/
border-top:60px solid #14A5A2;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
position: relative;
top:-1610px;
left:85px;
z-index:50;
transform: rotate(70deg);
}
.aa{
width:0px;
height:0px;
/*background:red;*/
border-top:90px solid #14A5A2;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
position: relative;
top:-1705px;
left:55px;
z-index:50;
transform: rotate(228deg);
}
.ab{
width:15px;
height:45px;
background:#14A5A2;
position: relative;
top:-1780px;
left:75px;
z-index:60;
transform: rotate(95deg);
}
.ac{
width:0px;
height:0px;
/*background:red;*/
border-top:90px solid #14A5A2;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
position: relative;
top:-1850px;
left:62px;
z-index:105;
transform: rotate(25deg);
}
.bow{
width:0px;
height:0px;
/*background:red;*/
border-top:18px solid transparent;
border-right:18px solid red;
border-bottom:18px solid transparent;
border-left:18px solid red;
position: relative;
top:-1730px;
left:138px;
z-index:40;
border-radius:10px 10px 10px 10px;
}
.final{
position:relative;
top:-1600px;
}
view raw phineas.css hosted with ❤ by GitHub
OUTPUT:



Share:

Related Posts:

23 comments:

  1. Anonymous11 June 2019 at 06:54

    I visited multiple web pages except the audio quality for audio songs current at this web page is
    actually marvelous. It's appropriate time to make a few plans for the future and it's time to be happy.
    I've read this put up and if I could I wish to counsel you some fascinating issues or suggestions.
    Maybe you could write subsequent articles relating to this article.

    I desire to read more things about it! I’ve been browsing online more than 2 hours today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. Personally, if
    all webmasters and bloggers made good content as
    you did, the internet will be a lot more useful than ever before.

    http://aoc.com

    ReplyDelete
  2. Anonymous29 September 2019 at 05:46

    I would like to thank you for the efforts you've put in penning this blog.
    I'm hoping to view the same high-grade blog posts by you in the future as well.
    In truth, your creative writing abilities has encouraged me to get my own, personal website now ;)

    ReplyDelete
  3. Anonymous17 October 2019 at 23:53

    I really lucky to find this website on bing, just what
    I was searching for :D also bookmarked.

    ReplyDelete
  4. Anonymous19 October 2019 at 23:29

    It's nearly impossible to find experienced people on this topic, but you sound like you know what
    you're talking about! Thanks

    ReplyDelete
  5. Anonymous20 October 2019 at 08:12

    Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your next post
    thank you once again.

    ReplyDelete
  6. Anonymous20 October 2019 at 20:02

    Hello! Someone in my Facebook group shared this site with us so I came to look it over.
    I'm definitely enjoying the information. I'm book-marking and will be tweeting this to my
    followers! Excellent blog and amazing style and
    design.

    ReplyDelete
  7. Anonymous20 October 2019 at 20:18

    I have been browsing on-line greater than 3 hours today, yet I never found any
    interesting article like yours. It's lovely worth enough for me.

    In my view, if all website owners and bloggers made
    excellent content as you did, the net will be much more helpful
    than ever before.

    ReplyDelete
  8. Anonymous21 October 2019 at 12:06

    Hello there! I could have sworn I've visited this website before
    but after browsing through some of the articles I realized it's new to me.

    Anyways, I'm certainly happy I found it and I'll be book-marking it and checking back frequently!

    ReplyDelete
  9. Anonymous23 October 2019 at 08:14

    Spot on with this write-up, I really feel this website needs much more attention. I'll probably be
    back again to see more, thanks for the advice!

    ReplyDelete
  10. Anonymous24 October 2019 at 19:33

    Every weekend i used to pay a quick visit this
    website, as i wish for enjoyment, for the reason that this this website conations
    truly fastidious funny material too.

    ReplyDelete
  11. Anonymous25 October 2019 at 19:21

    You are so cool! I don't think I've read anything like this before.
    So wonderful to find somebody with some unique thoughts on this subject matter.
    Really.. thank you for starting this up. This web site is
    something that is needed on the internet, someone with
    a bit of originality!

    ReplyDelete
  12. Anonymous1 November 2019 at 12:06

    Write more, thats all I have to say. Literally, it
    seems as though you relied on the video to make your
    point. You clearly know what youre talking about, why waste your intelligence on just posting videos to your site when you could be giving us something informative to read?

    ReplyDelete
    Replies
    1. @ditya Raj1 November 2019 at 12:46

      Thanks for you suggestion. I will definitely try to give much more written explanation of the Projects i post.

      Delete
  13. Anonymous3 November 2019 at 19:17

    Its not my first time to visit this web site, i am browsing this
    web page dailly and take pleasant information from here daily.

    ReplyDelete
  14. Anonymous4 November 2019 at 11:07

    If you wish for to get a great deal from this article then you
    have to apply these methods to your won webpage.

    ReplyDelete
  15. Anonymous4 November 2019 at 13:46

    I love it when folks come together and share views.
    Great website, keep it up!

    ReplyDelete
  16. Anonymous6 November 2019 at 11:23

    Unquestionably imagine that which you stated.
    Your favorite reason appeared to be at the internet the easiest factor to bear in mind of.
    I say to you, I definitely get annoyed while people think
    about concerns that they plainly don't understand about.
    You controlled to hit the nail upon the top and also
    defined out the whole thing with no need side-effects , other folks could take a signal.
    Will probably be back to get more. Thank you

    ReplyDelete
  17. Anonymous6 November 2019 at 20:58

    Normally I do not read article on blogs, but I
    would like to say that this write-up very compelled me to try and do it!
    Your writing taste has been amazed me. Thank
    you, quite nice article.

    ReplyDelete
  18. Anonymous7 November 2019 at 12:49

    Does your site have a contact page? I'm having a tough time
    locating it but, I'd like to shoot you an email. I've got
    some ideas for your blog you might be interested in hearing.
    Either way, great blog and I look forward to seeing it develop over time.

    ReplyDelete
    Replies
    1. @ditya Raj7 November 2019 at 16:48

      just join this page at any social media of which link is at bottom of page. from that you will know when any project is published.

      Delete
  19. Anonymous7 November 2019 at 16:31

    It's enormous that you are getting thoughts from this
    article as well as from our argument made at this time.

    ReplyDelete
  20. @ditya Raj7 November 2019 at 16:52

    for any query or question , join me at social media (link is at the bottom).

    ReplyDelete
  21. Anonymous13 November 2019 at 04:58

    It's difficult to find well-informed people on this topic, however, you seem like you know what you're talking about!

    Thanks

    ReplyDelete

Subscribe to: Post Comments (Atom)