Văn bản được cong bằng HTML & CSS

Tôi biết đã có một bài đăng về văn bản cong, nhưng tôi đang tìm kiếm nội dung cụ thể.Văn bản được cong bằng HTML & CSS

Trên trang web này (http://mrcthms.com/) Marc sử dụng một kỹ thuật tốt để vẽ văn bản cho tên của mình, nhưng tôi không thể làm việc cho cuộc sống của tôi như thế nào để tái tạo kỹ thuật. Dưới đây là những gì tôi đang cố gắng:

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined="" /> 
<title>Curved Text</title> 
<style type="text/css"> 
span { 
    display: inline-block; 
    font-family: futura-pt, 'Helvetica Neue', sans-serif; 
    font-size: 2.5em; 
    font-weight: 300; 
    margin: 1px; 
} 

.arced { 
    display: block; 
    text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px; 
    text-align: center; 
    margin: 20px; 
    padding: 50px 0 50px; 
} 

div span { 
    text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px; 
    font-family: futura-pt, 'Helvetica Neue', sans-serif; 
    font-size: 2.5em; 
    font-weight: 300; 
} 

.arced > span:nth-child(1) { 
    -webkit-transform:translateX(-1px) translateY(68px) rotate(-17deg); 
    -webkit-transition:0s; 
} 
</style> 
</head> 

<body> 
    <span class="arced"> 
     <span class="char1">S</span> 
     <span class="char2">T</span> 
     <span class="char2">E</span> 
     <span class="char3">V</span> 
     <span class="char4">E</span> 
</span> 
</body> 

</html>

Nguồn

2013-02-20 Fifer Sheep

Ông sử dụng CSS3 biến trên mỗi lá thư. Ví dụ, HTML cho tên của mình như sau:

<span class="arced"> 
    <span class="char1">M</span> 
    <span class="char2">a</span> 
    <span class="char3">r</span> 
    <span class="char4">c</span> 
    ... 
</span>

Và đến lượt mình, CSS như sau:

.show .hero h1 .arced > span:nth-child(1) { 
    -webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -moz-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -ms-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -o-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
      transform: translateX(-1px) translateY(68px) rotate(-17deg); 

    -webkit-transition-delay: 0s; 
     -moz-transition-delay: 0s; 
     -o-transition-delay: 0s; 
      transition-delay: 0s; 
} 

.show .hero h1 .arced > span:nth-child(2) { 
    -webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -moz-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -ms-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -o-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
      transform: translateX(-3px) translateY(39px) rotate(-13deg); 

    -webkit-transition-delay: .04s; 
     -moz-transition-delay: .04s; 
     -o-transition-delay: .04s; 
      transition-delay: .04s; 
}

Và vân vân.

Nguồn

2013-02-20 21:34:49 BenM

Dĩ nhiên ... gian tồn tại: nth-con (1) chỉ đề cập đến những nhân vật đầu tiên ... Tôi là một thằng ngốc đôi khi! Cảm ơn bạn! –

Không có vấn đề gì, một bộ não khác luôn giúp bạn! Hãy chấp nhận;) – BenM

Tôi đã xem một giải pháp có tên là: CircleType.js. Đẹp và dễ tạo văn bản hình tròn của nó. Cũng đơn giản như vậy

<h2 id="yourStyle">MARC THOMAS.</h2> 

$('#yourStyle').circleType({radius: 800});

Hoặc bạn có thể sử dụng lettering.js để chia các câu dài thành chữ nếu bạn thích làm việc thủ công.

Thêm hiệu ứng chuyển tiếp của bạn bằng CSS hoặc jquery như bình thường. Hi vọng điêu nay co ich!

Nguồn

2014-11-20 05:52:02 Aravind

Văn bản được cong bằng HTML & CSS

Trả lời

Các vấn đề liên quan