Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

CSS3 Vẽ ếch xanh dễ thương

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi thanh_rossi, 26/11/12.

Lượt xem: 12,175

  1. thanh_rossi Thành viên cấp 2

    1mVlm.png
    Trước tiên ta phân tích con ếch.
    Q8ycp.png

    Ta quan sát sơ bộ thấy con ếch được tạo thành chủ yếu tạo thành từ hình oval , để tạo một hình oval ta cho chiều cao gấp đôi chiều rộng và dùng thuộc tính border-radius của CSS3 để bo góc
    Ví dụ:
    aKQNG.png
    Code:
    #oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    }
    Khi đó nó sẽ bo góc với bán kính chiều ngang là 100px,và bán kính chiều dọc là 50px(ta có thể thay bằng 50%) và khi ta áp dụng cho 1 hình vuông khi bo góc 50% thì ta được 1 hình tròn.
    Lòng đen của con mắt phải (giống y hình pacman-phần này dài ko tiện giải thích).
    Code:
    #pacman {
    width: 0px;
    height: 0px;
    border-right: 40px solid transparent;
    border-top: 40px solid red;
    border-left: 40px solid red;
    border-bottom: 40px solid red;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    }
    Để tạo các bộ phận đối xứng ta xoay nó 1 góc 180 độ với thuộc tính transform:
    Code:
    transform: rotate(180deg);
    -moz-transform:rotate(180deg); /* cho FF */
    -webkit-transform:rotate(180deg); /* cho các trình duyệt webkit: safari, chrome */
    Ngoài ra ta sử dung position để căn chỉnh và selector nth-child để lựa chọn các đối tượng.

    Code HTML

    Code:
    <div class="ech">
    <div class="dau">
    <div class="mattrai">
    <div class="dongtu">
    <div class="longden"></div>
    </div>
    </div>
    <div class="matphai">
    <div class="dongtu">
    <div class="longden"></div>
    </div>
    </div>
    <div class="mieng">
    <div class="ma-trai"></div>
    <div class="mieng-giua"></div>
    <div class="ma-phai"></div>
    </div>
    </div>
    <div class="than">
    <div class="bung"></div>
    <div class="taytrai">
    <div class="ngontay"></div>
    <div class="ngontay"></div>
    <div class="ngontay"></div>
    </div>
    <div class="tayphai">
    <div class="ngontay"></div>
    <div class="ngontay"></div>
    <div class="ngontay"></div>
    </div>
    <div class="chantrai">
    <div class="ngonchan"></div>
    <div class="”ngonchan”"></div>
    <div class="ngonchan"></div>
    </div>
    <div class="chanphai">
    <div class="ngonchan"></div>
    <div class="ngonchan"></div>
    <div class="ngonchan"></div>
    </div>
    </div>
    </div>
    CSS

    Code:
    .ech{
    margin: 100px;
    }
    .dau{
    position: relative;
    background: #55d400;
    width:500px;
    height: 250px;
    -moz-border-radius: 250px / 125px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 250px / 125px;
    }
    .mattrai,.matphai{
    border-radius: 150px;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    width: 150px;
    height: 150px;
    background: #338000;
    position: absolute;
    }
    .mattrai{
    top: -50px;
    left: 50px;
    }
    .matphai{
    top: -54px;
    left: 293px;
    }
    .dongtu{
    border-radius: 120px;
    background: #fff;
    width: 120px;
    height: 120px;
    position:absolute;
    }
    .mattrai .dongtu{
    top: 12px;
    left: 22px;
    }
    .matphai .dongtu{
    top: 12px;
    left: 10px;
    }
    .longden{
    width: 0px;
      height: 0px;
      border-right: 40px solid transparent;
      border-top: 40px solid #000;
      border-left: 40px solid #000;
      border-bottom: 40px solid #000;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
    position: absolute;
    -webkit-animation-name: cate;
            -webkit-animation-duration: 10s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: 200;
    }
    .mattrai .longden{
    top: 17px;
    left: 30px;
    transform: rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    }
    .matphai .longden{
    top: 17px;
    left: 10px;
    }
    .mieng{
    position: relative;
    }
    .ma-trai,.ma-phai{
    border-radius: 80px;
    width: 80px;
    height: 80px;
    background: #fe0000;
    position: absolute;
    }
    .ma-trai{
    top: 120px;
    left:90px;
    }
    .ma-phai{
    top: 120px;
    left:310px;
    }
    .mieng-giua{
    border-radius: 200px;
    width: 400px;
    height: 400px;
    border-bottom: 8px solid #000;
    position: absolute;
    top: -180px;
    left: 40px;
    z-index: 100;
    clip: rect(360px auto auto auto);
    }
    .than{
    background: #55d400;
    width:400px;
    height: 200px;
    -moz-border-radius: 200px / 100px;
    -webkit-border-radius: 200px / 100px;
    border-radius: 200px / 100px;
    position: absolute;
    top: 300px;
    left: 150px;
    }
    .bung{
    background: #fff;
    width:250px;
    height: 125px;
    -moz-border-radius: 125px / 62px;
    -webkit-border-radius: 125px / 62px;
    border-radius: 125px / 62px;
    position: absolute;
    top: 70px;
    left: 70px;
    }
    .taytrai,.tayphai{
    width: 80px;
    height: 200px;
    background-color: #338000;
    border-radius:  50%;
    position: absolute;
    }
    .taytrai{
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    top: 20px;
    left: -35px;
    }
    .tayphai{
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    top: 22px;
    left: 340px;
    }
    .ngontay,.ngonchan{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #55d400;
    position: relative;
    }
    .taytrai div:nth-child(1){
    position: absolute;
    top: 170px;
    left: -20px;
    }
    .taytrai div:nth-child(2){
    position: absolute;
    top: 185px;
    left: 10px;
    }
    .taytrai div:nth-child(3){
    position: absolute;
    top: 170px;
    left: 42px;
    }
    .tayphai div:nth-child(1){
    position: absolute;
    top: 170px;
    left: -20px;
    }
    .tayphai div:nth-child(2){
    position: absolute;
    top: 180px;
    left: 10px;
    }
    .tayphai div:nth-child(3){
    position: absolute;
    top: 170px;
    left: 42px;
    }
    .chantrai,.chanphai{
    width: 80px;
    height: 90px;
    background-color: #338000;
    border-radius:  50%;
    position: absolute;
    }
    .chantrai{
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    top: 150px;
    left: 70px;
    z-index: -99;
    }
    .chanphai{
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    top: 150px;
    left: 250px;
    z-index: -99;
    }
    .chantrai div:nth-child(1){
    position: absolute;
    top: 70px;
    left: -20px;
    }
    .chantrai div:nth-child(2){
    position: absolute;
    top: 80px;
    left: 20px;
    }
    .chantrai div:nth-child(3){
    position: absolute;
    top: 50px;
    left: 58px;
    }
    .chanphai div:nth-child(1){
    position: absolute;
    top: 50px;
    left: -30px;
    }
    .chanphai div:nth-child(2){
    position: absolute;
    top: 70px;
    left: 10px;
    }
    .chanphai div:nth-child(3){
    position: absolute;
    top: 60px;
    left: 50px;
    }
    //animation eye
    @-webkit-keyframes cate{
        0%{
            margin:0 0 0 0;
        }
        80%    {
            margin:0px 0 0 0;
        }
        85%    {
            margin:-20px 0 0 0;
        }
        90%{
            margin:0 0 0 0;
        }
        93%{
            margin:0 0 0 7px;
        }
        96%{
            margin:0 0 0 0;
        }
        100%{
            margin:0 0 0 0;
        }
    }
    @-moz-keyframes cate{
        0%{
            margin:0 0 0 0;
        }
        80%    {
            margin:0px 0 0 0;
        }
        85%    {
            margin:-20px 0 0 0;
        }
        90%{
            margin:0 0 0 0;
        }
        93%{
            margin:0 0 0 7px;
        }
        96%{
            margin:0 0 0 0;
        }
        100%{
            margin:0 0 0 0;
        }
    }
    
    Demo : xem tại đây



    Nguồn: Cosmos phạm 's blog

    ...
    Cáo Ba Chỏm, phi, pitlamgi5 người khác thích bài viết này.
  2. ChangeMyself

    ChangeMyself Thành viên cấp 2

    chả hiểu @@
  3. Mèo Heo

    Mèo Heo Admin Việt Font

    Cái này không phải Photoshop đâu bạn, code dùng trong thiết kế Web đó 8-}
  4. RainyWarrior

    RainyWarrior Thành viên Max level

    mình chưa biết lập trình nhưng nhìn cũng dễ hiểu phết ;))
  5. Jun Kòi

    Jun Kòi Thành viên cấp 2

    Cái này chắc là Dreamweaver :| nhìn đống code nhức đầu quá #:-s
    Lâm Ngọc Thanh thích bài viết này
  6. ILovePhotoshop

    ILovePhotoshop Admin page Vietdesigner.Net

    con ếch kỳ công vậy mà vài lệnh code dạng căn bản đã vẽ đc,hay,thank bạn .
  7. Thiên Ma

    Thiên Ma Lãng du VietDesigner

    Paint bằng Code đó bác .
  8. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Bằng notepad
  9. pitlamgi

    pitlamgi Banned

    Đẹp quá. :)

    Quên k nhờ bác ít việc . Bác cho cái Y!M nhé bác.:-bd
  10. Mepo

    Mepo Thành viên cấp 3

    Nhìn đống này lại nhớ đến hồi học web... Cứ code flash, css, java mà ám ảnh :-s
    thanh_rossi thích bài viết này
  11. hiroki

    hiroki Thành viên cấp 3

    khổ các bạn coder ghê
    hình này chắc designer vẽ 5' còn coder fải mất 30' để code :))
    thanh_rossi thích bài viết này
  12. HoangTran38

    HoangTran38 Thành viên cấp 1

    hay đó nhey .hehe
  13. Hổ Báo VietDesigner

    Hổ Báo VietDesigner Huyền Thoại VietDesigner

    - Đại ca thanh_rossi tái xuất ! Ủng hộ nhiệt tình luôn nhóe ! :like:
    Chú Ếch rất Dễ thương ha ! :x
    thanh_rossi thích bài viết này
Từ khóa:

Ủng hộ diễn đàn