५ पैकी ३.५

काही टॅग आणि शुद्ध CSS सह स्केलेबल त्रिकोण बनवणे शक्य आहे असे तुम्हाला वाटते का? पंचकोनाचे काय? पण असा तारा? मला वाटते की अनेकांना वाटत नाही. प्रत्यक्षात ते शक्य आहे.

तर, आज एक पोस्ट-प्रयोग आहे. आम्ही सुप्रसिद्ध CSS गुणधर्म - बॉर्डर (आणि त्याच्याशी संबंधित सर्व) खेळू. प्रयोगादरम्यान आपण काही साधे बहुभुज, एक तारा कसा बनवायचा ते पाहू आणि या तंत्रांचा सरावात वापर केला जाऊ शकतो अशा एका केसकडे पाहू. जा!

साधे भौमितिक आकार

तर सोप्या उदाहरणांनी सुरुवात करूया. फक्त HTML आणि CSS वापरून त्रिकोण कसा काढायचा हे तुम्हाला माहीत आहे का? आणि याप्रमाणे:

HTML

CSS

.trapezoid ( अनुलंब-संरेखित: मजकूर-तळाशी; )

ट्रॅपेझॉइड,
.बहुभुज (प्रदर्शन: -moz-इनलाइन-ब्लॉक; )

बहुभुज,
.trapezoid ( समास: 0; पॅडिंग: 0; पार्श्वभूमी: काहीही नाही; )

बहुभुज (रुंदी: 10em; उंची: 10em; सीमा: काहीही नाही; प्रदर्शन: इनलाइन-ब्लॉक; मजकूर-संरेखित: केंद्र; )
ट्रॅपेझॉइड (
प्रदर्शन: इनलाइन-ब्लॉक; रुंदी: 1px; उंची: 0; मार्जिन: 0 ऑटो;
सीमा-डावीकडे: 5em घन पारदर्शक; सीमा-उजवीकडे: 5em घन पारदर्शक;
}

बहुभुज .aa ( सीमा-तळ: 10em घन; सीमा-टॉप: काहीही नाही; )

Polygon.r2 (उंची: 0em;)

Polygon.r3 (उंची: 8.66em;)
.polygon.r3 .trapezoid (सीमा-रुंदी: 8.66em 5em; )

div.eg (रुंदी: 10em; पार्श्वभूमी: #FFF; समास: 0 0; पॅडिंग: 1em; )
div.eg .बहुभुज (प्रदर्शन: ब्लॉक; समास: 0 स्वयं; )

R3 (रंग: लाल; फॉन्ट-आकार: 0.5em;)

तारा

HTML

तारा

CSS

#तारा(
रुंदी: 15em;
उंची: 14.27m;
स्थिती: नातेवाईक;
}

#स्टार स्पॅन,
#तारा(
प्रदर्शन: ब्लॉक;
}

#शीर्ष(
रुंदी: 0;
उंची: 0;
समास: स्वयं;
सीमा-उजवीकडे: 4.64em घन पारदर्शक;
सीमा-डावीकडे: 4.64em घन पारदर्शक;
सीमा-तळ: 14.27em घन;
}

#केंद्र(
रुंदी: 5.7em;
सीमा-उजवीकडे: 4.65em घन पारदर्शक;
सीमा-डावीकडे: 4.65em घन पारदर्शक;
बॉर्डर-टॉप: 3.36em घन;
उंची: 0;
स्थिती: निरपेक्ष;
शीर्ष: 5.46em;
डावीकडे: 0;
z-इंडेक्स: 100;
मजकूर-संरेखित: केंद्र;
}

#तळाशी(
स्थिती: निरपेक्ष;
तळ: 0;
डावीकडे: 2.852em;
सीमा-उजवीकडे: 4.635em घन पारदर्शक;
सीमा-डावीकडे: 4.635em घन पारदर्शक;
सीमा-तळ: 3.4em घन #fff;
रुंदी: 0;
उंची: 0;
}

#केंद्राचा कालावधी(
margin-top: -2em;
रंग: #000;
फॉन्ट-वजन: ठळक;
}

a#star:hover #center span(
रंग: #fff;
पार्श्वभूमी-रंग: पारदर्शक;
}

एक तारा(
रंग: #f90;
पार्श्वभूमी-रंग: पारदर्शक;
}
a#star:hover(
रंग: #fc3;
पार्श्वभूमी-रंग: पारदर्शक;
}

आणखी काही उदाहरणे

• एरिक मेयर द्वारे ख्रिसमस ट्री आणि असामान्य मांडणी;
• टेक्नोक्रेसीच्या मुख्य तंत्रज्ञांकडून टाइल आणि मेनू;

नमस्कार, प्रिय वाचकांनो. आज मी तुम्हाला सांगेन आणि तुम्हाला दाखवेन की तुम्ही CSS मध्ये मजकूर बाह्यरेखा कशी तयार करू शकता. आम्ही केवळ मजकूर-सावली गुणधर्मांसह सर्व हाताळणी करू.

पातळ, कुरकुरीत बाह्यरेखा

एक मजकूर म्हणून ज्यावर आम्ही आमच्या सर्व कल्पनांची चाचणी करू, मी हे वापरण्याचा प्रस्ताव देतो:

येथे तुम्ही पाहू शकता की मजकूरासह ब्लॉकमध्ये क्लास टेक्स्ट-डिसे आहे. याद्वारेच आपण css मध्ये आपला घटक ऍक्सेस करू, त्यावर आवश्यक गुणधर्म लागू करू. तर, पातळ स्ट्रोक कसा बनवायचा:

मजकूर-डिसेंबर (फॉन्ट-आकार: 50px; रंग: पिवळा; मजकूर-सावली: 1px 1px 0 काळा, -1px -1px 0 काळा)

चला ताबडतोब एक मोठा फॉन्ट आकार सेट करूया जेणेकरून सर्वकाही अगदी स्पष्टपणे दृश्यमान होईल आणि मजकूराचा रंग पिवळा असेल, उदाहरणार्थ. आमच्या बाबतीत तिसरी ओळ त्या स्ट्रोकची अंमलबजावणी करते.

मजकूर-छाया गुणधर्म तुम्हाला मजकुरात छाया जोडण्याची परवानगी देतो, तुम्ही स्वल्पविरामाने विभक्त करून तुम्हाला हवे तितक्या छाया जोडू शकता. मालमत्ता वाक्यरचना आहे:

मजकूर-छाया: क्षैतिज ऑफसेट | अनुलंब | अस्पष्ट | रंग

आमच्या बाबतीत, आम्ही प्रथम खाली आणि डावीकडे एक लहान ऑफसेट सेट करतो आणि नंतर वर आणि उजवीकडे. परिणामी, मजकूर त्याच्या संपूर्ण समोच्च बाजूने रेखांकित केला गेला आहे. तुम्ही प्रत्येक सावलीत 10 पिक्सेल ब्लर जोडल्यास, ते असे दिसेल:

अस्पष्ट स्ट्रोक

दुसरा दृष्टिकोन म्हणजे ऑफसेट अजिबात निर्दिष्ट न करणे, परंतु अस्पष्टता परिभाषित करणे - नंतर मजकूर देखील स्पष्ट केला जाईल, परंतु स्पष्टपणे नाही. चला html मध्ये समान अचूक मजकूर जोडू, परंतु फक्त भिन्न शैली वर्ग सेट करू - text-dec2:

मजकूर-डिसे2 (फॉन्ट-आकार: 50px; रंग: निळा; मजकूर-सावली: 0 0 7px लाल;)

हे असे दिसते:

ठळक स्ट्रोक

हे अंमलात आणणे अधिक कठीण आहे, कारण सावल्या खूप हलवल्याने मजकूर वाचता येत नाही. आणि तरीही एक विशिष्ट प्रभाव प्राप्त केला जाऊ शकतो, जरी यासाठी आपल्याला मागील प्रकरणांपेक्षा जास्त सावली जोडावी लागतील. त्यानुसार, html मध्ये text-dec3 आणि text-dec4 वर्गांसह नवीन मजकूर तुकडे जोडा. आणि त्यांच्यासाठी येथे शैली आहेत:

मजकूर-डिसे3 (फॉन्ट-आकार: 50px; रंग: पिवळा; मजकूर-सावली: 1px 1px 0 काळा, -1px -1px 0 काळा, 2px 2px 0 काळा, -2px -2px 0 काळा, 3px 3px 0 काळा, -3px - 3px 0 काळा, 4px 4px 0 काळा, -4px -4px 0 काळा ) .text-dec4( फॉन्ट-आकार: 50px; रंग: पिवळा; मजकूर-छाया: -1px 1px 0 काळा, 1px -1px 0 काळा, -2px 2px 0 काळा, 2px -2px 0 काळा, -3px 3px 0 काळा, 3px -3px 0 काळा, -4px 4px 0 काळा, 4px -4px 0 काळा )

जसे आपण पाहू शकता, मजकूर वाचनीयता टिकवून ठेवला आणि त्याच वेळी एक सभ्य काळा बाह्यरेखा प्राप्त झाली. या दृष्टिकोनाचा सार असा आहे की आम्ही प्रत्येक वेळी 1 पिक्सेलने ऑफसेट वाढवून हळूहळू नवीन सावल्या जोडतो.

सर्व बाजूंनी अगदी जाड स्ट्रोक

पुढे - अधिक कठीण. सर्व बाजूंनी स्ट्रोक कसा योग्यरित्या अंमलात आणायचा हे मला वैयक्तिकरित्या माहित नव्हते, परंतु नंतर मला इंटरनेटवर मजकूर-सावली जनरेटर सापडला, जो आपल्याला व्हिज्युअल मोडमध्ये सावली सानुकूलित करण्यास अनुमती देतो आणि नंतर आपल्याला फक्त त्याचा कोड कॉपी करण्याची आवश्यकता आहे. . जनरेटरची लिंक येथे आहे.
त्याच्या मदतीने मी अशी सावली बनवू शकलो:

मी कोड देणार नाही, त्यासाठी 50 ओळी लागतील तथापि, जनरेटरमध्ये स्वत: ला शोधा.

CSS अद्याप सर्वशक्तिमान नाही

येथेच CSS क्षमता संपतात. तुम्हाला यासारखा छान बोल्ड स्ट्रोक हवा असल्यास:
नंतर ते फोटोशॉपमध्ये बनवा आणि मजकूर स्वतः वेब पृष्ठावर प्रतिमा म्हणून घालावा लागेल

CSS मध्ये मजकूर बाह्यरेखा कशी बनवायची यासारखे पर्याय मला आतापर्यंत माहित आहेत. कदाचित तुम्हाला काही माहित असेल, टिप्पण्यांमध्ये लिहा. पुढील वेळी मी तुम्हाला मजकूर-छाया गुणधर्म वापरून मजकूरासह करू शकणारे आणखी काही प्रभाव दाखवेन.

नक्कीच, आपण फोटोशॉपमध्ये सौंदर्य तयार करू शकता, परंतु आपल्याला मजकूर जतन करण्याची आणि सुंदर चित्रासह पेस्ट न करण्याची आवश्यकता असल्यास काय?

उदाहरणार्थ, चांगल्या अनुक्रमणिकेसाठी, मला टॅगमध्ये शीर्षक मजकूर बनवायचा होता

. पण त्याच वेळी सौंदर्य टिकवून ठेवा. याप्रमाणे:

तर, CSS वापरून सावलीसह काही मजकूर बनवूया:

स्तर 3 CSS मध्ये कोणत्याही मजकुराच्या प्रत्येक अक्षरावर सावली जोडण्यासाठी "टेक्स्ट-शॅडो" गुणधर्म आहे.

1. सर्वात सोपा फॉर्म: h3 (मजकूर-छाया: 0.1em 0.1em #333)
2. अस्पष्ट मजकूर सावल्या: h3.b (मजकूर-छाया: 0.1em 0.1em 0.2em काळा)
3. वाचनीय पांढरा मजकूर: h3.a (रंग: पांढरा; मजकूर-छाया: काळा 0.1em 0.1em 0.2em)
4. स्तरित सावल्या: h3 (मजकूर-छाया: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006)
5. अक्षरे आणि रूपरेषा काढणे: h3 (मजकूर-छाया: -1px 0 काळा, 0 1px काळा, 1px 0 काळा, 0 -1px काळा)
6. निऑन ग्लो: h3.a (मजकूर-छाया: 0 0 0.2em #8F7) h3.b (मजकूर-छाया: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (मजकूर-छाया: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

आणखी एक मनोरंजक उदाहरणः

CSS सह मजकूर बाह्यरेखा

स्क्रिप्टचा अवलंब न करता CSS वापरून मजकूराची रूपरेषा काढणे शक्य आहे. हा प्रभाव मजकूर-छाया गुणधर्म वापरून तयार केला जाऊ शकतो. जरी IE ही मालमत्ता त्याच्या कोणत्याही आवृत्तीमध्ये स्वीकारत नसली तरी, वर्णन केलेली कृती इतर लोकप्रिय ब्राउझरमध्ये उत्तम कार्य करेल.

खालील कोड विचारात घ्या:

उदाहरण क्रमांक १

H1(मजकूर-छाया: लाल 1px 0px, लाल 1px 1px, लाल 0px 1px, लाल -1px 1px, लाल -1px 0px, लाल -1px -1px, लाल 0px -1px, लाल 1px -1px;)

मजकूर-सावली गुणधर्माचा पहिला पॅरामीटर सावलीचा रंग सेट करतो, दुसरा मजकूराच्या सापेक्ष सावलीचा क्षैतिज ऑफसेट, तिसरा अनुलंब ऑफसेट. जेव्हा तुम्ही मजकुराभोवती सर्व दिशांना 1 पिक्सेल बदलून सावली ऑफसेट निर्दिष्ट करता, तेव्हा तुम्हाला स्ट्रोक प्रभाव मिळतो.

स्ट्रोक उदाहरण क्रमांक 1

स्ट्रोक अधिक संतृप्त करण्यासाठी, आपण चौथा पॅरामीटर मजकूर-छाया वापरू शकता, जो सावलीच्या अंधुक त्रिज्यासाठी जबाबदार आहे:

उदाहरण क्रमांक 2

H1(मजकूर-छाया: लाल 1px 0px, लाल 1px 1px, लाल 0px 1px, लाल -1px 1px, लाल -1px 0px, लाल -1px -1px, लाल 0px -1px, लाल 1px -1px, लाल 0px, 3px, लाल 0 0 3px, लाल 0 0 3px, लाल 0 0 3px, लाल 0 0 3px, लाल 0 0 3px, लाल 0 0 3px, लाल 0 0 3px;)

स्ट्रोक उदाहरण क्रमांक 2

आपण लक्षात घेतल्यास, "लाल 0 0 3px" गुणधर्म अनेक वेळा पुनरावृत्ती होते. संपृक्तता प्रभाव येथे आहे. स्ट्रोकचे स्पष्ट प्रदर्शन प्राप्त करण्यासाठी, मालमत्ता इतर पॅरामीटर्ससह मोठ्या संख्येने जोडली जाऊ शकते. एकमात्र नकारात्मक बाजू म्हणजे ते कमकुवत संगणकांवर ब्राउझरची गती कमी करू शकते.

व्लाड मर्झेविच

एकेकाळी छाया असलेल्या मजकूराची एक विशिष्ट फॅशन होती आणि जवळजवळ कोणत्याही वेबसाइटवर समान प्रभाव आढळू शकतो. ग्राफिक एडिटरमध्ये, सावली जोडणे सोपे आहे, ते छान दिसते, येथे सावली असलेला मजकूर आहे आणि साइटची शैली आणि डिझायनरच्या प्रमाणाची पर्वा न करता वेब पृष्ठांवर टाकला आहे. जेव्हा बहुतेक ब्राउझरने मजकूर-सावली शैली गुणधर्मांना समर्थन देण्यास सुरुवात केली, तेव्हा फॅशन आधीच निघून गेली होती आणि आता सावलीसह मजकूर दुर्मिळ आहे. तथापि, टेक्स्ट-शॅडोचे इतर अनेक गर्भित उपयोग आहेत ज्याबद्दल काही लोकांना शंका आहे. या गुणधर्माचा वापर करून, तुम्ही बाह्यरेखा मजकूर तयार करू शकता, ते "एक्सट्रूड" करू शकता, चमक तयार करू शकता, अस्पष्ट करू शकता आणि बरेच काही करू शकता.

मजकूर-सावली वापरणे

चार पॅरामीटर्स व्हॅल्यू म्हणून लिहिलेली आहेत: सावलीचा रंग, क्षैतिज आणि अनुलंब विस्थापन आणि सावली अस्पष्ट त्रिज्या (चित्र 1).

तांदूळ. 1. मजकूर-सावली पॅरामीटर्स

रंग कोणत्याही योग्य CSS फॉरमॅटमध्ये सर्व पॅरामीटर्सच्या सुरूवातीस किंवा शेवटी लिहिला जाऊ शकतो. त्यामुळे तुम्ही rgba फॉरमॅट वापरून अर्धपारदर्शक सावली बनवू शकता. सकारात्मक ऑफसेट मूल्ये सावली उजवीकडे आणि खाली टाकतात, तर नकारात्मक ऑफसेट मूल्ये सावलीला अनुक्रमे डावीकडे आणि वर टाकतात. मजकुराभोवती सावली ठेवण्यासाठी, फक्त ऑफसेट मूल्ये शून्यावर सेट करा. अंधुक त्रिज्या सावली किती तीक्ष्ण असेल हे सेट करते. अंधुक त्रिज्या जितकी मोठी तितकी सावली मऊ दिसते.

मजकूर-सावलीचा एक मोठा फायदा म्हणजे एकाच वेळी अनेक भिन्न छाया जोडण्याची क्षमता, त्यांचे पॅरामीटर्स स्वल्पविरामाने विभक्त करून सूचीबद्ध करणे. हे वैशिष्ट्य मुळात आपल्याला भिन्न प्रभाव तयार करण्यास अनुमती देते.

दुर्दैवाने, आवृत्ती 10.0 पूर्वीचे IE मजकूर-छायाला समर्थन देत नाही, त्यामुळे आम्हाला या ब्राउझरमध्ये कोणतेही सौंदर्य दिसणार नाही.

बाह्यरेखा मजकूर हे वैशिष्ट्यपूर्ण आहे की प्रत्येक अक्षर एका रेषेने वेढलेले आहे, ज्याचा रंग मजकूराच्या रंगापेक्षा वेगळा आहे (चित्र 2). हा प्रभाव मोठ्या फॉन्ट आकारासह सर्वोत्तम दिसतो, जसे की हेडिंग. मुख्य मजकूरासाठी, बाह्यरेखा वापरल्याने केवळ वाचनीयता कमी होते.

तांदूळ. 2. बाह्यरेखा मजकूर

दोन पद्धती वापरून एक समोच्च तयार केले जाऊ शकते. पहिल्या पद्धतीमध्ये, आम्ही शून्य सावली ऑफसेट आणि एक लहान अस्पष्ट त्रिज्या सेट करतो, अक्षरशः 1-2 पिक्सेल (उदाहरण 1). अस्पष्ट मूल्य वाढवल्याने बाह्यरेखा मजकुराभोवती चमकते, जो एक वेगळा प्रभाव आहे.

उदाहरण 1: बाह्यरेखा मजकूर

बाह्यरेखा मजकूर

या पद्धतीने तयार केलेला समोच्च अंजीर मध्ये दर्शविला आहे. 1. बाह्यरेखा थोडीशी अस्पष्ट झाली आहे, म्हणून ज्यांना स्पष्ट रेषा मिळवायची आहे त्यांच्यासाठी दुसरी पद्धत हेतू आहे. यात एकाच रंगाच्या चार तीक्ष्ण सावल्या वापरल्या जातात, त्या एका पिक्सेलने वेगवेगळ्या कोनांवर हलवल्या जातात (उदाहरण 2).

उदाहरण 2. बाह्यरेखा साठी चार सावल्या

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

बाह्यरेखा मजकूर

अशा समोच्चचे स्वरूप अंजीर मध्ये दर्शविले आहे. 3. हे लक्षात येते की समोच्च अधिक अर्थपूर्ण आहे.

तांदूळ. 3. चार सावल्या असलेले समोच्च

अंजीर मध्ये दर्शविलेले 3D मजकूर प्रभाव जोडण्यासाठी. 4, अनेक सावल्या एकाच वेळी लागू केल्या जातात, ज्या एकमेकांच्या सापेक्ष एका पिक्सेलने क्षैतिज आणि अनुलंबपणे हलवल्या जातात.

तांदूळ. 4. 3D मजकूर

व्यक्तिशः, या प्रकारचा मजकूर मला रेट्रो शैलीतील अक्षरांची आठवण करून देतो आणि पुन्हा, वेब पृष्ठाच्या मुख्य भागाऐवजी हेडिंगसाठी सर्वात योग्य आहे.

तुम्हाला मजकूर पुढे किती "पुल" करायचा आहे यावर सावल्यांची संख्या अवलंबून असते. मोठी संख्या अक्षरांची "खोली" वाढवते, त्याउलट, एक लहान संख्या, त्रिमितीयता कमी करते. उदाहरण 3 एकाच रंगाच्या पाच सावल्या वापरतो.

उदाहरण ३: त्रिमिती जोडण्यासाठी सावली

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

दहा चेंबर रेफ्रिजरेटर

सर्व सावल्यांसाठी आम्ही अस्पष्ट त्रिज्या शून्य आणि समान रंगावर सेट करतो. सावल्या फक्त त्यांच्या ऑफसेट मूल्यांमध्ये भिन्न असतात.

मजकूर एम्बॉसिंग

मजकूर एम्बॉसिंगचा प्रभाव तयार करण्यासाठी किंवा दुसऱ्या शब्दांत, आराम, मजकूराचा रंग पार्श्वभूमी रंगाशी जुळला पाहिजे. पृष्ठभागाच्या वरच्या "उघडलेल्या" अक्षरांचा एक भाग प्रकाशित झालेला दिसतो, तर दुसरा भाग सावलीत आहे (चित्र 5).

तांदूळ. 5. नक्षीदार मजकूर

समान प्रभाव जोडण्यासाठी, आम्हाला दोन सावल्यांची आवश्यकता आहे - आम्ही पांढरी सावली एका पिक्सेलने डावीकडे हलवतो आणि गडद राखाडी उजवीकडे खाली हलवतो (उदाहरण 4).

उदाहरण ४: नक्षीदार मजकूर

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

नक्षीदार मजकूर

राखाडी पार्श्वभूमीवर आराम सर्वोत्तम दिसतो, त्यामुळे साइटच्या प्रत्येक रंगसंगतीसाठी प्रभाव योग्य नाही. तसे, एक्सट्रूडेड मजकूर ऐवजी दाबणे सोपे आहे फक्त सावलीचे रंग बदला;

मजकूर-छाया: #333 -1px -1px 0, #fff 1px 1px 0;

चमकणे

मजकुराच्या सभोवतालची चमक समान सावली आहे, फक्त ती चमकदार आणि विरोधाभासी आहे. अशा प्रकारे, ग्लो इफेक्ट तयार करण्यासाठी, फक्त सावलीचा रंग बदला आणि इच्छित अस्पष्ट त्रिज्या सेट करा. मजकुराच्या सभोवतालची चमक एकसमान असली पाहिजे म्हणून, सावली ऑफसेट शून्यावर सेट केली पाहिजे. अंजीर मध्ये. आकृती 6 वेगवेगळ्या रंगांमध्ये चमकण्याचे उदाहरण दाखवते.

तांदूळ. 6. ग्लो मजकूर

उदाहरण 5. चमक

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

उजळ बाजू

काळी बाजू

अस्पष्ट

सावली स्वतःच अस्पष्ट आहे, म्हणून जर आपण फक्त सावली सोडली आणि मजकूर लपवला तर आपल्याला अस्पष्ट अक्षरे मिळतील (चित्र 7), आणि मजकूर-सावली पॅरामीटर वापरून अस्पष्टतेची डिग्री सहजपणे समायोजित केली जाऊ शकते.

तांदूळ. 7. अस्पष्टतेसह मजकूर

मूळ मजकूर लपवण्यासाठी, फक्त रंग पारदर्शक वर सेट करा (उदाहरण 6). सावलीचा रंग नंतर मजकूर रंग म्हणून कार्य करतो आणि अस्पष्ट त्रिज्या अक्षरांच्या अस्पष्टतेची डिग्री सेट करते.

उदाहरण 6: अस्पष्ट मजकूर

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

अस्पष्ट मजकूर

सावली आणि छद्म-वर्ग

सावली थेट मजकूरात जोडण्याची गरज नाही; यामुळे, मजकुरासह मनोरंजक प्रभाव प्राप्त होतात, जसे की परिच्छेदाचे प्रथम अक्षर किंवा दुव्याची चमक जेव्हा तुम्ही त्यावर माउस कर्सर फिरवता. उदाहरण 7 अशी तंत्रे दाखवते.

उदाहरण 7: स्यूडो-क्लासेस वापरणे

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

खर्चाची पर्वा न करता एक कोनाडा प्रकल्प पारंपारिक चॅनेलची गती कमी करतो. बाजाराची रचना, तपशील टाकून, मागील मोहिमांचा अनुभव वापरून, विपणन आणि विक्री विभाग स्थिर करते. ब्रँड बिल्डिंग, अर्थातच, उत्स्फूर्तपणे अभिसरण पीआरला दूर ढकलते, बाजार विभाग जिंकते. गुंतवणूक ही भूमिका सामाजिक स्थिती, वाढती स्पर्धा समक्रमित करते. पूर्वीच्या मोहिमांचा अनुभव वापरून ब्रँड स्वाभाविकपणे प्लेसमेंट योजना ठरवतो.

सीएसएस बॉर्डर प्रॉपर्टीचा वापर ऑब्जेक्टची बॉर्डर तयार करण्यासाठी केला जातो, म्हणजे बॉर्डरची जाडी, त्याचा रंग आणि शैली. ही मालमत्ता HTML मध्ये मोठ्या प्रमाणावर वापरली जाते. पृष्ठावरील सामग्री चांगल्या प्रकारे समजून घेण्यासाठी तुम्ही विविध प्रभाव तयार करू शकता. उदाहरणार्थ, साइडबार, वेबसाइट शीर्षलेख, मेनू इत्यादी डिझाइन करा.

1. CSS सीमा वाक्यरचना

सीमा: सीमा-रुंदी सीमा-शैली सीमा-रंग | वारसा;

• सीमा-रुंदी - सीमा जाडी. तुम्ही ते पिक्सेल (px) मध्ये सेट करू शकता किंवा पातळ, मध्यम, जाड मानक मूल्ये वापरू शकता (ते फक्त पिक्सेलच्या रुंदीमध्ये भिन्न आहेत)
• सीमा-शैली - प्रदर्शित बॉर्डरची शैली. खालील मूल्ये घेऊ शकतात
  • काहीही किंवा लपलेले नाही - सीमा रद्द करते
  • ठिपके - ठिपके असलेली फ्रेम
  • डॅश - डॅशची बनलेली फ्रेम
  • घन - साधी ओळ (बहुतेकदा वापरली जाते)
  • दुहेरी - दुहेरी फ्रेम
  • groove - grooved 3D बॉर्डर
  • रिज, इनसेट, आउटसेट - विविध 3D फ्रेम प्रभाव
  • inherit - मूळ घटकाचे मूल्य लागू केले आहे
• सीमा रंग - सीमा रंग. विशिष्ट रंगाचे नाव वापरून किंवा RGB स्वरूपात निर्दिष्ट केले जाऊ शकते (साइटसाठी html रंगांची नावे पहा)

नोंद

CSS सीमा गुणधर्मातील मूल्ये कोणत्याही क्रमाने सेट केली जाऊ शकतात. सर्वात सामान्यपणे वापरलेला क्रम म्हणजे "जाडी शैलीचा रंग".

2. भिन्न CSS सीमा असलेली उदाहरणे

२.१. उदाहरण. विविध सीमा डिझाइन शैली सीमा-शैली

सीमा शैली: डॅश

सीमा शैली: डॅश

सीमा शैली: घन

सीमा-शैली: दुहेरी

सीमा-शैली: खोबणी

सीमा शैली: रिज

सीमा-शैली: इनसेट

सीमा शैली: प्रारंभ

चार वेगवेगळ्या फ्रेम्स

सीमा शैली: ठिपके

सीमा शैली: डॅश

सीमा शैली: घन

सीमा-शैली: दुहेरी

सीमा-शैली: खोबणी

सीमा शैली: रिज

सीमा-शैली: इनसेट

सीमा शैली: प्रारंभ

चार वेगवेगळ्या फ्रेम्स

२.२. उदाहरण. माऊस फिरवल्यावर फ्रेमचा रंग बदला

हे उदाहरण अगदी साधे पण मनोरंजक आहे. हे दाखवते की :hover स्यूडो-क्लास आणि CSS बॉर्डर साधे प्रभाव (जसे की मेनू) तयार करण्यासाठी कसे वापरले जाऊ शकतात.

जेव्हा तुम्ही तुमचा माउस ब्लॉकवर फिरवाल तेव्हा फ्रेमचा रंग बदलेल

पृष्ठावर हे असे दिसते:

२.३. उदाहरण. पारदर्शक सीमा फ्रेम कशी बनवायची

फ्रेम पारदर्शक बनवता येते. हा प्रभाव दुर्मिळ आहे, परंतु कधीकधी वेब डिझायनर्ससाठी खूप उपयुक्त ठरू शकतो. पारदर्शकता सेट करण्यासाठी, तुम्हाला RGBA (R, G, B, P) फॉर्ममध्ये रंग सेटिंग वापरण्याची आवश्यकता आहे, जिथे शेवटचे पॅरामीटर पारदर्शकता सेट करते (वास्तविक संख्या 0.0 ते 1.0 पर्यंत)

पृष्ठावर हे असे दिसते:

3. सीमा जाडी: सीमा-रुंदी गुणधर्म

रेषेची जाडी सेट करते. पूर्वी, आम्ही ते सीमांच्या एका वर्णनात निर्दिष्ट केले आहे.

CSS सीमा-रुंदी वाक्यरचना

सीमा-रुंदी: पातळ | मध्यम | जाड | अर्थ;

• पातळ - पातळ रेषेची जाडी
• मध्यम - सरासरी ओळ जाडी
• thick - जाड ओळ जाडी

खाली काही उदाहरणे दिली आहेत. सर्वात असामान्य गोष्ट प्रत्येक बाजूला सीमेची भिन्न जाडी असेल.

सीमा-रुंदी: पातळ

सीमा-रुंदी: मध्यम

सीमा-रुंदी: जाड

सीमांवर भिन्न जाडी

पृष्ठावर हे असे दिसते:

सीमा-रुंदी: पातळ

सीमा-रुंदी: मध्यम

सीमा-रुंदी: जाड

सीमांवर भिन्न जाडी

4. फक्त एका काठावर (सीमा) बॉर्डर फ्रेम कशी बनवायची

सीएसएस बॉर्डर प्रॉपर्टीमध्ये घटकावर एकतर्फी सीमा सेट करण्यासाठी गुणधर्म प्राप्त केले आहेत:

• बॉर्डर-टॉप - शीर्षस्थानी सीमा सेट करण्यासाठी (शीर्ष सीमा)
• बॉर्डर-बॉटम - तळाशी बॉर्डर सेट करण्यासाठी (तळाशी सीमा)
• सीमा-उजवीकडे - उजवीकडे सीमा सेट करण्यासाठी (उजवीकडे सीमा)
• सीमा-डावीकडे - डावीकडे सीमा सेट करण्यासाठी (डावी सीमा)

या सीमा एकत्र केल्या जाऊ शकतात, म्हणजे. प्रत्येक दिशेसाठी तुमची स्वतःची फ्रेम लिहा. वाक्यरचना सीमा प्रमाणेच आहे.

गुणधर्म देखील आहेत

• बॉर्डर-टॉप-रंग - वरच्या सीमेचा रंग सेट करणे
• बॉर्डर-टॉप-शैली - वरच्या सीमेची शैली सेट करणे
• बॉर्डर-टॉप-रुंदी - वरच्या सीमेची जाडी सेट करणे
• इ. प्रत्येक दिशेने

माझ्या मते, शैलींमध्ये अतिरिक्त मजकूर तयार करण्यापेक्षा सर्वकाही एका ओळीत लिहिणे सोपे आहे. उदाहरणार्थ, खालील गुणधर्म समान असतील

/* दोन समान शैलींचे वर्णन: */

४.१. उदाहरण. कोट्स हायलाइट करण्यासाठी सुंदर फ्रेम

कोट फ्रेम उदाहरण

पृष्ठावर हे असे दिसते:

कोट फ्रेम उदाहरण

नोंद
आपण प्रत्येक बाजूसाठी स्वतंत्र सीमा सेट करू शकता.

5. html घटकामध्ये एकाधिक सीमा कशा जोडाव्यात

कधीकधी आपल्याला अनेक सीमा बनविण्याची आवश्यकता असते. एक उदाहरण देऊ

५.१. एकाधिक सीमांसह पहिला पर्याय

पृष्ठावर हे असे दिसते:

सावलीचा दुसरा मार्ग आहे.

५.२. एकाधिक सीमा तयार करण्यासाठी आच्छादन सावल्या

पृष्ठावर हे असे दिसते:

6. सीमांवर गोलाकार कोपरे (सीमा-त्रिज्या)

सुंदर किनारी तयार करण्यासाठी, CSS सीमा-त्रिज्या गुणधर्म वापरा (केवळ CSS3 मध्ये उपलब्ध). हे गोलाकार कोपरे तयार करण्यासाठी वापरले जाऊ शकते, जे पूर्णपणे भिन्न स्वरूप तयार करते. उदाहरणार्थ

7. CSS इंडेंटेड लाइन

उदासीन रेषा गडद पार्श्वभूमीवर प्रभावी दिसू शकतात, जी प्रत्येक साइटसाठी योग्य नाही.

---

पृष्ठावर हे असे दिसते:

JavaScript वरून बॉर्डर ऍक्सेस करण्यासाठी, तुम्हाला खालील बांधकाम लिहावे लागेल:

document.getElementById("elementID").style.border="VALUE"