एचटीएमएल और सीएसएस

का उपयोग करके घुमावदार पाठ मुझे पता है कि घुमावदार पाठ के बारे में पहले से ही एक पोस्ट है, लेकिन मैं कुछ विशिष्ट खोज रहा हूं।एचटीएमएल और सीएसएस

इस वेबपृष्ठ पर (http://mrcthms.com/) मार्क अपने नाम के लिए पाठ को घुमाने के लिए एक अच्छी तकनीक का उपयोग करता है, लेकिन मैं तकनीक के दोहराने के लिए मेरे जीवन के लिए काम नहीं कर सकता। यहां मैं कोशिश कर रहा हूं:

<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>

स्रोत

2013-02-20 Fifer Sheep

वह प्रत्येक पत्र पर CSS3 ट्रांसफॉर्म का उपयोग करता है। उदाहरण के लिए, उसका नाम के लिए HTML इस प्रकार है:

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

और बदले में, सीएसएस इस प्रकार है:

.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; 
}

और इतने पर।

स्रोत

2013-02-20 21:34:49 BenM

बेशक ... अवधि: nth-child (1) केवल पहले वर्ण को संदर्भित करता है ... मैं कभी-कभी मूर्ख हूं! धन्यवाद! –

कोई समस्या नहीं, एक और दिमाग हमेशा मदद करता है! स्वीकार करने के लिए स्वतंत्र महसूस करें;) – BenM

मैं एक समाधान में आया: CircleType.js। गोलाकार पाठ बनाने के लिए यह अच्छा और आसान है। बस के रूप में के रूप में है कि

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

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

सरल या आप lettering.js का उपयोग पत्र में लंबे वाक्यों विभाजित करने के लिए कर सकते हैं अगर आप मैन्युअल रूप से काम करने के लिए पसंद करते हैं।

सामान्य रूप से सीएसएस या jquery का उपयोग करके अपने संक्रमण जोड़ें। उम्मीद है की यह मदद करेगा!

स्रोत

2014-11-20 05:52:02 Aravind

उत्तर

संबंधित मुद्दे