Суреттеріңізді стилі және суреттерді мәнерлерде қолданыңыз
Көптеген адамдар мәтінді түзету, қаріпті өзгерту, түс, өлшем және т.б. үшін CSS- ды пайдаланады. Бірақ көптеген адамдар көбінесе ұмытып кететін нәрсе - сіз CSS-ті бейнелермен де қолдануға болады.
Кескіннің өзін өзгерту
CSS сізге кескіннің бетке қалай көрінетінін реттеуге мүмкіндік береді. Бұл сіздің беттеріңізді дәйекті сақтау үшін өте пайдалы болуы мүмкін. Барлық кескіндердегі мәнерлерді орнату арқылы суреттерге арналған стандартты көрініс жасалады. Сіз жасай алатын кейбір нәрселер:
- Суреттердің шекарасын немесе сызбасын қосыңыз
- Байланған суреттердің айналасындағы түсті жиекшені алып тастаңыз
- Суреттердің енін және / немесе биіктігін реттеу
- Көлеңке көлеңкесін қосыңыз
- Кескінді бұрыңыз
- Сурет үстіне шыққанда стильдерді өзгертіңіз
Кескінді шекараға беру - бастау үшін тамаша орын. Бірақ сіз шекарадан гөрі көп нәрсені ескеруіңіз керек - суреттің бүкіл шетін ойлап, шеттерін және толтырғыштарды түзетіңіз. Жіңішке қара шекарасы бар кескін жақсы көрінеді, бірақ шекара мен сурет арасындағы кейбір толтырғыштарды қосу да жақсы көрінуі мүмкін.
img {
шекара: 1px қатты қара;
толтыру: 5px;
}
Мүмкіндігінше сәндік емес бейнелерді әрдайым байланыстырған дұрыс. Бірақ сіз жасай отырып, көптеген браузерлер суреттің айналасында түсті жиек қосуды ұмытпаңыз. Егер сіз шекараны өзгерту үшін жоғарыда аталған кодты қолдансаңыз да, сілтемедегі шекараны алып тастамасаңыз немесе өзгертпесеңіз, сілтеме бұған назар аударады. Мұны істеу үшін сілтемедегі суреттердің шекарасын жою немесе өзгерту үшін CSS бала ережесін қолдануыңыз керек:
img> a {
шекара: жоқ;
}
Сондай-ақ, сіз CSS-ді кескіндердің биіктігін және енін өзгерту немесе өзгерту үшін пайдалана аласыз. Жүктеу жылдамдығынан кескін өлшемдерін реттеу үшін браузерді пайдалану идеясы жақсы болмаса да, олар әлі де жақсы көрінуі үшін кескіндердің өлшемін жақсартады. CSS-мен сіз өзіңіздің суреттеріңізді стандартты ен немесе биіктікке орнатуға немесе тіпті контейнерлерге қатысты өлшемдерді орнатуға болады.
Есіңізде болсын, суреттерді өлшеммен салыстырған кезде, жақсы нәтижелерге қол жеткізу үшін тек бір өлшемді - биіктікті немесе енді өзгерту керек. Бұл сурет кескіннің арақатынасын сақтап қалады, сондықтан да таңқаларлық көрінбейді. Басқа мәнді автоматты түрде орнатыңыз немесе браузердің арақатынасын сәйкес келуін қамтамасыз ету үшін қалдырыңыз.
img {
ені: 50%;
биіктігі: авто;
}
CSS3 бұл мәселені объект-бейімдеу және объект-позицияның жаңа сипаттарымен шешеді. Осы қасиеттермен сіз нақты биіктігі мен енін және кадр пішімін қалай өңдеу керек екенін анықтай аласыз. Бұл кескіннің айналасында әріптермен жұмыс жасайтын эффекттерді немесе кескінді талап етілетін көлемге сәйкес келтіру үшін жасай алады.
CSS3 нысан нысанына және объект-орналасу сипаттарына әлі қолдау көрсетілмеген кезде, суреттерді өзгерту үшін қолдануға болатын қазіргі заманғы браузерлерде жақсы қолдау көрсетілетін басқа CSS3 сипаттары бар. Көптеген заманауи браузерлерде суреттеріңізді айналдыруға, жылжытуға немесе жылжытуға арналған көлеңкелер, бұрыштық бұрыштар және өзгерулер сияқты нәрселер. Кейінірек CSS кескіндерін кескіндерді өзгерткенде немесе басқанда немесе уақыт өткеннен кейін өзгерту үшін қолдануға болады.
Кескіндерді фонды ретінде пайдалану
CSS бейнелеріңізді қиялға айналдыруды жеңілдетеді.
Фондарды бүкіл бетке немесе белгілі бір элементке қосуға болады. Фондық-сурет сипаты бар бетке фондық суретті жасау оңай:
дене {
background-image: url (background.jpg);
}
Фонды тек бір элементке қою үшін дене селекторын беттегі белгілі бір элементке өзгертіңіз.
Суреттермен жасай алатын тағы бір қызық нәрсе - су белгісіне ұқсас беттің қалған бөлігімен жылжытпайтын фон суреті жасайды. Сіз жай ғана стильдің фондық-тіркемесін қолданасыз: тіркелген; және сіздің фондық суретіңізбен бірге. Фондарыңыздың басқа нұсқалары оларды фондық-қайталау сипатын пайдаланып, көлденең немесе тігінен жайғастыруды қамтиды.
Background-repeat жазыңыз: repeat-x; кескінді көлденең және фондық-қайталауды қайталау: repeat-y; тігінен тақтайша қою. Сондай-ақ, фондық суретті өң-позиция сипатымен орналастыруға болады.
Сондай-ақ, CSS3 сіздің фондарыңызға қосымша стильдер қосады. Суреттеріңізді кез-келген көлемдік фонға сəйкестендіруге немесе терезе өлшемімен масштабтау үшін өңдік кескінді орнатуға болады . Сіз позицияны өзгерте аласыз, содан кейін өңдік кескінді қысқартыңыз. Бірақ, CSS3 туралы ең жақсы нәрселердің бірі - енді күрделі әсерлерді жасау үшін бірнеше фондық кескіндерді қабаттауға болады.
HTML5 кескіндерді мәнерге келтіруге көмектеседі
HTML5 ішіндегі FIGURE элементі құжаттағы жалғыз тұрған кез-келген кескіннің айналасына орналастырылуы керек. Бұл туралы ойлаудың бір жолы, егер сурет қосымшада пайда болса, онда ол FIGURE элементінің ішінде болуы керек. Одан кейін бұл элементті және суреттерге мәнерлер қосу үшін FIGCAPTION элементін пайдалануға болады.