বাড়ি
রিভিউ
ভিতরের ছায়া css3. CSS-এ অভ্যন্তরীণ ছায়া। একটি ছোট দূরত্ব নিচে সরান এবং প্রচণ্ডভাবে অস্পষ্ট

ভিতরের ছায়া css3. CSS-এ অভ্যন্তরীণ ছায়া। একটি ছোট দূরত্ব নিচে সরান এবং প্রচণ্ডভাবে অস্পষ্ট

CSS বক্স-শ্যাডো প্রপার্টি আপনাকে একটি ছায়া সেট করতে দেয় html উপাদান. এটি প্রায়শই ওয়েবসাইট ডিজাইনারদের দ্বারা টেক্সট, ছবি দিয়ে ফ্রেম সাজাতে এবং হাইলাইট করতে এবং বিষয়বস্তুকে আরও পঠনযোগ্য করতে ব্যবহার করা হয়।

CSS বক্স-শ্যাডো সিনট্যাক্স

... বক্স-ছায়া : X Y R1 R2 রঙ ; ...
  • X - X অক্ষ বরাবর অফসেট (অনুভূমিক)
  • Y - Y অক্ষ বরাবর অফসেট (উল্লম্ব)
  • R1 - ঝাপসা (মান যত বেশি হবে, রূপান্তর তত মসৃণ)
  • R2 - এক্সটেনশনের ব্যাসার্ধ (যদি ধনাত্মক, এটি প্রসারিত হয়, নেতিবাচক, এটি সংকুচিত হয়)
  • রঙ - রঙ (যেকোন বিন্যাসে নির্দিষ্ট করা যেতে পারে: #RGB, রঙের নাম)
  • ইনসেট - যদি এই মানটি উপস্থিত থাকে তবে ছায়াটি ব্লকের ভিতরে অবস্থিত হবে (উপাদান)

উদাহরণ 1. অফসেট ছাড়া বক্স-শ্যাডো সহ HTML ফ্রেম

নিচে CSS বক্স-শ্যাডো প্রপার্টি চালু করে শ্যাডো ব্যবহার করার সবচেয়ে সহজ উপায় html পৃষ্ঠাযখন এটি স্থানচ্যুতি ছাড়াই পুরো ফ্রেমের চারপাশে সমানভাবে প্রবাহিত হয়।

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

  • -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
  • -moz-box-shadow - для Firefox до версии 4.0

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

  1. ключевое слово inset устанавливает тень внутри элемента;
  2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
  3. сдвиг по вертикали (5px - вниз, -5px - вверх);
  4. радиус размытия тени (0 - резкая тень);
  5. растяжение тени (5px - растяжение, -5px - сжатие);
  6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени
Код Результат Описание
box-shadow: 5px 5px; Резкая тень справа и снизу.
box-shadow: -5px -5px; Резкая тень слева и сверху.
box-shadow: 0 0 5px; Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px; Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red; Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); Полупрозрачная тень.
box-shadow: inset 0 0 6px; Тень внутри.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Блок с тенью

শত্রুর ব্যানারের বিরুদ্ধে যাবেন না যখন তারা নিখুঁত ক্রমে থাকে;

শত্রুর শিবির যখন দুর্ভেদ্য তখন আক্রমণ করবেন না;

এটি পরিবর্তন ব্যবস্থাপনা।

সান জু, ট্রান্স। নিকোলাই কনরাড

এই উদাহরণের ফলাফল চিত্রে দেখানো হয়েছে। 2. ছায়াটি ব্লকের কোণগুলির বৃত্তাকার অনুসরণ করে।

ভাত। 2. পটভূমির ছবিতে ছায়ার উপস্থিতি

একটি "প্রশস্ত" ছায়া যোগ করার সময়, এটি ব্রাউজার উইন্ডোর দৃশ্যমান সীমানার বাইরে প্রসারিত হতে পারে এবং এর ফলে একটি অনুভূমিক স্ক্রলবার প্রদর্শিত হতে পারে তা জেনে রাখুন৷

ছায়াগুলিও ছদ্ম-উপাদানগুলিতে যোগ করা যেতে পারে; এটি কখনও কখনও জটিল বিন্যাসের জন্য প্রয়োজন হয়। চিত্রে। চিত্র 3 একটি হেডার ব্লক দেখায় যেখানে একটি ছায়া যুক্ত করা হয়েছে। জংশনে কোনো লাইন এড়াতে, আপনাকে ::আফটার সিউডো-এলিমেন্ট ব্যবহার করতে হবে এবং এতে একটি ছায়া যোগ করতে হবে।

ভাত। 3. ছায়া দিয়ে ব্লক করুন

উদাহরণ 2 এই ধরনের একটি ব্লক তৈরি দেখায়।

উদাহরণ 2. ছায়া দিয়ে ব্লক করুন

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ছায়া দিয়ে ব্লক করুন

শিরোনাম

ভাত। 3. ছায়া দিয়ে ব্লক করুন

উদাহরণ 2 এই ধরনের একটি ব্লক তৈরি দেখায়।

বিষয়বস্তু ব্লক করুন

একটি উপাদান একাধিক ছায়া থাকতে পারে; উদাহরণ 3 দেখায় কিভাবে সমস্ত ছবিতে একটি ডবল ছায়া যোগ করতে হয়।

ছবি

প্রথম ছায়াটি 20px এর একটি অস্পষ্ট ব্যাসার্ধ সহ চিত্রের বাম দিকে প্রদর্শিত হয়, এর আকার চতুর্থ প্যারামিটার (-20px) দ্বারা হ্রাস করা হয়। দ্বিতীয় ছায়ার পরামিতিগুলি দশমিক বিন্দুর পরে নির্দেশিত হয় এবং ছায়াটি চিত্রের ডানদিকে প্রদর্শিত হয় এবং প্রতিসাম্যের জন্যও হ্রাস করা হয়।

আজ আমরা শিখব কিভাবে ছবি ছাড়াই CSS শ্যাডো তৈরি করা যায়। এই টিউটোরিয়ালটি শেষ করার পরে, আপনার আর একটি CSS ছায়া জেনারেটরের প্রয়োজন হবে না।

CSS3 ব্যবহার করে তৈরি ছায়াগুলির প্রধান সুবিধা হল বাস্তবায়নের সহজতা এবং সার্ভারে অনুরোধের সংখ্যা হ্রাস (যেহেতু আমরা আর ছবি ব্যবহার করি না)। একটি CSS ছায়া তৈরি করতে আমাদের একটি div ট্যাগ এবং একটি CSS বক্স-শ্যাডো প্রপার্টি প্রয়োজন। আপনার কোন অতিরিক্ত মার্কআপের প্রয়োজন হবে না কারণ আমরা তৈরি করব :after এবং :before ছদ্ম উপাদান যা আমরা মূল বস্তুর পিছনে রাখব (ক্লাস সহ একটি ডিভ ব্লক).

HTML কোডটি দেখুন যার জন্য আমরা একটি CSS3 ছায়া তৈরি করব:

বিষয়বস্তু

পরবর্তী আপনি দেখতে পারেন প্রস্তুত উদাহরণএবং তাদের বাস্তবায়নের জন্য প্রয়োজনীয় কোড। পৃষ্ঠায় লেখাটিকে ছোট করার জন্য, আমরা বাদ দেব CSS বৈশিষ্ট্যব্রাউজার উপসর্গ সহ। সম্পূর্ণ কোডআপনি উদাহরণের সাথে সম্পর্কিত "উদাহরণ" লিঙ্কে ক্লিক করে এটি দেখতে পারেন।

.block ( অবস্থান: আপেক্ষিক; প্রস্থ: 40%; প্যাডিং: 1em; মার্জিন: 2em 10px 4em; পটভূমি:#fff; বর্ডার-ব্যাসার্ধ:4px; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) ইনসেট; ) .block:fore, .block:after (content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; প্রস্থ: 20%; বক্স-ছায়া: 0, 0, 0, 0.7; বাম: স্বয়ংক্রিয়ভাবে ঘোরান (3 ডিগ্রি);


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0. z-সূচক:-2; উচ্চতা: 55%; পরে ( ডান:10px; বাম: স্বয়ংক্রিয়; রূপান্তর: স্ক্যু (8 ডিগ্রি) ঘোরান (3 ডিগ্রি); )

একটি ছায়া ব্যবহার করে আপনি একটি ব্লক দৃষ্টিকোণ দিতে পারেন। উদাহরণ দেখুন।


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0. ; প্রস্থ: 50%; সর্বোচ্চ-প্রস্থ:-80px 0, 0, 0.4 ;

উত্থাপিত ব্লকের জন্য CSS ছায়া। উদাহরণ দেখুন।


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0. , 0, 0, 0.1) ইনসেট; ) .block:fore, .block:after ( বিষয়বস্তু:""; অবস্থান:পরম; z-সূচক:-2; )

উল্লম্বভাবে ভাঁজ করা ব্লকের জন্য উদাহরণ CSS3 ছায়া। উদাহরণ দেখুন।


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ইনসেট; ) .block:fore, .block:after ( বিষয়বস্তু:""; অবস্থান:পরম; z-সূচক:-2; ) .block:আগে ( top:10px; নীচে:10px ; বাম: 50%; বক্স-ছায়া: 0 0, 0, 0.6 পিক্সেল;


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ইনসেট; ) .block:fore, .block:after ( বিষয়বস্তু:""; অবস্থান:পরম; z-সূচক:-2; ) .block:আগে ( top:10px; নীচে:10px বাম: 0; বক্স-ছায়া: 0 15px rgba(0,0,0,0.6);

অনুভূমিকভাবে ভাঁজ করা ব্লকের জন্য উদাহরণ CSS3 ছায়া। উদাহরণ দেখুন।


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0. 0px; বাম: 0 15px rgba(0,0,0,0.6): 100px/10px;


.block ( অবস্থান:আপেক্ষিক; প্রস্থ:40%; প্যাডিং:1em; মার্জিন:2em 10px 4em; পটভূমি:#fff; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0. বাম: 10px; বক্স-ছায়া: 0 15px rgba(0,0,0,0.6);

ঘোরানো ব্লকের জন্য CSS3 ছায়া। উদাহরণ দেখুন।


.block ( অবস্থান: আপেক্ষিক; প্রস্থ: 40%; প্যাডিং: 1em; মার্জিন: 2em 10px 4em; পটভূমি:#fff; বর্ডার-ব্যাসার্ধ:4px; বক্স-ছায়া:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: none: rotate(-3deg) -index:-1; বক্স-শ্যাডো: 0 1px 4px rgba (0, 0, 0, 0.1) ইনসেট; :আগে, .ব্লক:পরে ( বিষয়বস্তু:""; অবস্থান:পরম; z-সূচক:-2; নীচে:15px; বাম:10px; প্রস্থ:50%; উচ্চতা:20%; সর্বোচ্চ-প্রস্থ:300px; বক্স- ছায়া: 0 15px 10px rgba(0, 0, 0, 0.7);

রেকর্ডিংয়ের ক্রম মৌলিকভাবে গুরুত্বপূর্ণ। প্রথম মানটি সর্বদা X অক্ষ বরাবর অফসেট, দ্বিতীয়টি - Y অক্ষ বরাবর।

একটি অক্ষ বরাবর একটি অফসেট প্রয়োজন না হলে, এটি শূন্য সেট করুন:

ক্লাস (বক্স-ছায়া: 0 8px;) - ছায়াটিকে শুধুমাত্র Y অক্ষ বরাবর স্থানান্তর করুন

ফলাফল

ক্লাস (বক্স-ছায়া: 8px 8px;) – উভয় অক্ষ বরাবর স্থানান্তর করুন

ফলাফল

বক্স-ছায়া অক্ষের জন্য ঋণাত্মক মান

ছায়া বিপরীত দিকে সরানো হবে:

ক্লাস (বক্স-ছায়া: -8px 8px;) - X অক্ষ বরাবর একটি নেতিবাচক মান সহ ছায়াটি স্থানান্তর করুন

ফলাফল

ছায়া ঝাপসা ব্যাসার্ধ

তৃতীয় সম্পত্তি পরামিতি বক্স-ছায়া. যদি নির্দিষ্ট করা না থাকে, তাহলে মানটি 0 এবং ছায়ার আকার এটি প্রয়োগ করা উপাদানটির আকারের সমান।

ক্লাস (বক্স-ছায়া: 0 48px 0;) - ছায়াটি উপাদানটির মাত্রাগুলিকে সদৃশ করে যেখানে এটি প্রয়োগ করা হয়েছে

ফলাফল

যখন মান শূন্যের চেয়ে বেশি হয়, তখন প্রান্তগুলি সংজ্ঞা হারায়, ছায়াটি বড় এবং দৃশ্যত হালকা হয়ে যায়। সমস্ত দিক থেকে অস্পষ্টতা প্রয়োগ করা হয়:

ক্লাস (বক্স-শ্যাডো: 0 0 8px;) – কোন অফসেট নয়, শুধুমাত্র ঝাপসা

ফলাফল

ক্লাস (বক্স-শ্যাডো: 0 8px 8px;) – Y-অক্ষ অফসেট এবং ব্লার

ফলাফল

একটি নেতিবাচক মান একটি ত্রুটি হিসাবে বিবেচিত হয় এবং ছায়াটি মোটেও প্রদর্শিত হবে না।

ছায়া প্রসারিত ব্যাসার্ধ

চতুর্থ সম্পত্তি পরামিতি বক্স-ছায়া. উপাদানের সাপেক্ষে ছায়ার আকার পরিবর্তন করে। সব দিকে প্রসারিত:

ক্লাস (বক্স-শ্যাডো: 0 0 0 8px;) – কোন স্থানচ্যুতি বা অস্পষ্টতা নেই, শুধুমাত্র প্রসারিত

ফলাফল

এই ক্ষেত্রে, ছায়াটি প্রস্থ এবং উচ্চতায় উপাদানটির চেয়ে 16 পিক্সেল বড়: 8px বাম + 8px ডান এবং 8px শীর্ষ + 8px নীচে।

CSS-এ নেতিবাচক ছায়া প্রসারিত মান

ছায়াটি প্রসারিত হয় না, তবে নির্দিষ্ট মান দ্বারা সমস্ত দিকে সরু হয়:

ক্লাস (বক্স-ছায়া: 0 16px 0 -8px;) - একটি নেতিবাচক মান সহ ছায়া হ্রাস করুন

ফলাফল

ছায়া রঙ

ডিফল্টরূপে, ছায়া রঙ ফন্টের রঙের নকল করে: উপরের উদাহরণগুলির মতো।

ছায়ার রঙ যেকোনো উপলব্ধ CSS বিন্যাসে নির্দিষ্ট করা হয়েছে:

  • #ff0009
  • rgb(255, 0, 9)
  • hsl(358, 100%, 50%);

উপাদানটিকে একটি নীল ছায়া দিন:

ক্লাস (বক্স-ছায়া: 0 8px #3a8fe7;)

ফলাফল

ভেতরের ছায়া

প্যারামিটার ইনসেটব্লকের ভিতরে একটি ছায়া দেখায়।

উপরে তালিকাভুক্ত বিকল্পগুলির বিপরীতে, কোন কঠোর লেখার আদেশ নেই। উভয় বিকল্প একই ফলাফল দেবে:

বক্স-ছায়া: 0 8px #3a8fe7 ইনসেট; বক্স-ছায়া: ইনসেট 0 8px #3a8fe7;

ফলাফল

কোড পড়ার সময় দ্বিতীয় বিকল্পটি বোঝা সহজ।

বেশ কিছু ছায়া

একাধিক ছায়া কমা দ্বারা পৃথক করা হয়। উপরে থেকে নীচের ক্রম প্রদর্শন করুন:

ক্লাস (বক্স-ছায়া: 0 8px #3a8fe7, 0 16px #3ae7af; )

ফলাফল

যদি আপনি স্থান পরিবর্তন করেন, নীল ছায়া দৃশ্যমান হবে না:

ক্লাস (বক্স-ছায়া: 0 16px #3ae7af, 0 8px #3a8fe7; )

ফলাফল

অভ্যন্তরীণ এবং বাইরের ছায়া একই সময়ে সেট করা হয়:

ক্লাস (বক্স-ছায়া: 0 16px #3ae7af, ইনসেট 0 8px #3a8fe7; )

ফলাফল

গোলাকার ছায়া

যদি একটি উপাদান সম্পত্তি দেওয়া হয় সীমানা-ব্যাসার্ধ, ছায়া গোলাকার কোণে থাকবে।

ক্লাস (বক্স-ছায়া: 0 16px #3a8fe7; সীমানা-ব্যাসার্ধ: 8px; )

ফলাফল

ছায়া প্রসারিত সেট করে, আমরা তার বৃত্তাকার বৃদ্ধি. উদাহরণস্বরূপ, সীমানা-ব্যাসার্ধ 8px এবং ছায়া প্রসারিত 4।

8+4=12px হল ছায়ার বৃত্তাকার ব্যাসার্ধ।

ক্লাস (বক্স-ছায়া: 0 16px 0 4px #3a8fe7; সীমানা-ব্যাসার্ধ: 8px; )

ফলাফল

মান ঋণাত্মক হলে ছায়া সঙ্কুচিত করার ক্ষেত্রে একই নীতি প্রযোজ্য।

8+(-4)=4px - আমরা একটি ছায়া গোলাকার পাই যা দ্বিগুণ ছোট।

যদি ছায়ার সংকোচন সীমানা-ব্যাসার্ধের চেয়ে বেশি হয়, আমরা সমকোণ সহ একটি ছায়া পাব। উদাহরণস্বরূপ, কম্প্রেশন হল 16px।

8+(-16)=(-8), কিন্তু ফিললেটের একটি ঋণাত্মক মান থাকতে পারে না এবং শূন্য প্রয়োগ করা হবে।

ক্লাস (বক্স-ছায়া: 0 24px 0 -16px #3a8fe7; সীমানা-ব্যাসার্ধ: 8px; )

ফলাফল

CSS সম্পত্তি বক্স-ছায়াঅপেরা মিনি ছাড়া সব জনপ্রিয় ব্রাউজার দ্বারা সমর্থিত।

রিভিউ

আপনি পছন্দ করতে পারেন