Rezultate pentru tag: radiu
CSS Borders
Proprietăți CSS Borders.
Proprietățiile CSS Borders vă permit să specificați stilul, lățimea și culoarea chenarului unui element.
CSS Border Style.
Proprietatea CSS Border Style specifică ce fel de chenar trebuie afișat.
Sunt permise următoarele valori:
dotted (punctat) - Definește un chenar (border) punctat.
dashed - Definește o bordură (border) punctată.
solid - Definește o bordură (border) solidă.
double (dublu) - Definește o bordură (border) dublă.
groove - Definește un chenar cu caneluri 3D. Efectul depinde de valoarea culorii bordurii (border-color).
ridge - Definește un chenar (border) ridicat 3D. Efectul depinde de valoarea culorii bordurii (border-color).
inset - Definește un chenar (border) de inserție 3D. Efectul depinde de valoarea culorii bordurii (border-color).
outset - Definește un chenar (border) de declanșare 3D. Efectul depinde de valoarea culorii bordurii (border-color).
none - Nu definește nici o frontieră (border).
hidden (ascuns) - definește un chenar (border) ascuns.
Proprietatea border-style poate avea de la una până la patru valori (pentru top border, right border, bottom border, left border).
Niciuna dintre celelalte proprietăți CSS border descrise mai jos nu va avea NICIUN efect, decât dacă este setată proprietatea border-style!
Lățimea marginilor CSS (CSS Border Width)
Proprietatea border-width specifică lățimea celor patru chenare.
Lățimea poate fi setată ca o dimensiune specifică (în px, pt, cm, em, etc.) sau folosind una dintre cele trei valori predefinite: subțire, medie sau groasă (thin, medium, thick.).
Proprietatea border-width poate avea de la una până la patru valori (pentru marginea superioară, granița dreaptă, limita de jos și marginea din stânga/ top border, right border, bottom border, left border).
CSS Border Color
Proprietatea border-color este utilizată pentru a seta culoarea celor patru chenare.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
transparent.
Proprietatea border-color poate avea de la una până la patru valori (pentru marginea de sus, marginea dreaptă, limita de jos și marginea din stânga/top border, right border, bottom border, left border).Dacă border-color nu este setată, moștenește culoarea elementului.
CSS Border - Individual Sides
Din exemplele de mai sus, ați văzut că este posibil să specificați o frontieră diferită pentru fiecare parte.
În CSS, există, de asemenea, proprietăți pentru specificarea fiecărui chenar (sus, dreapta, jos și stânga/top, right, bottom, left).
Dacă proprietatea border-style are patru valori:
border-style: punctat dublu punctat solid.
top border este punctat.
right border este solid.
bottom border este dublu.
left border este punctat.
Dacă proprietatea border-style are trei valori:border-style: dublu solid punctat.
top border este punctat.
right și left borders sunt solide.
bottom border este dublu.
Dacă proprietatea border-style are două valori:
border-style: solid punctat.
top și bottom borders sunt punctate.
right și left borders sunt solide.
Dacă proprietatea border-style are o valoare:
border-style: punctat.
toate cele patru granițe sunt punctate.
Proprietatea border-style este folosită în exemplul de mai sus. Cu toate acestea, funcționează, de asemenea, cu border-width și border-color.
CSS Border - Proprietatea Shorthand
După cum puteți vedea din exemplele de mai sus, există multe proprietăți de luat în considerare atunci când aveți de-a face cu frontierele.
Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile de frontieră individuale într-o singură proprietate.
Proprietatea de frontieră (border) este o proprietate shorthand pentru următoarele proprietăți individuale de frontieră:
border-width
border-style (required)
border-color
Frontierele rotunjite CSS (CSS Rounded Borders).
Proprietatea border-radius este utilizată pentru a adăuga borduri rotunjite la un element.
Toate proprietățile top border într-o singură declarație.
Acest exemplu demonstrează o proprietate shorthand pentru setarea tuturor proprietăților pentru top border într-o singură declarație.
Setați stilul marginii de jos (bottom border).
Acest exemplu demonstrează cum să setați stilul marginii de jos (bottom border).
Setați lățimea marginii din stânga (left border).
Acest exemplu demonstrează modul de setare a lățimii marginii din stânga (left border).
Setați culoarea celor patru chenare (borders).
Acest exemplu demonstrează cum să setați culoarea celor patru chenare. Poate avea de la una la patru culori.
Setați culoarea marginii drepte (right border).
Acest exemplu demonstrează cum să setați culoarea marginii drepte (right border).
border Setează toate proprietățile de frontieră într-o singură declarație
border-bottom Setează toate proprietățile frontierei de jos într-o singură declarație
border-bottom-color Setează culoarea marginii de jos
border-bottom-style Setează stilul marginii de jos
border-bottom-width Setează lățimea marginii de jos
border-color Setează culoarea celor patru chenare
border-left Stabilește toate proprietățile frontierei din stânga într-o singură declarație
border-left-color Setează culoarea marginii din stânga
border-left-style Setează stilul chenarului din stânga
border-left-width Setează lățimea marginii din stânga
border-radius Setează toate cele patru chenare - * - proprietăți ale razei pentru colțurile rotunjite
border-right Setează toate proprietățile de frontieră dreaptă într-o singură declarație
border-right-color Setează culoarea marginii drepte
border-right-style Setează stilul chenarului drept
border-right-width Setează lățimea marginii drepte
border-style Setează stilul celor patru chenare
border-top Setează toate proprietățile de frontieră de sus într-o singură declarație
border-top-color Setează culoarea marginii superioare
border-top-style Setează stilul chenarului superior
border-top-width Setează lățimea marginii superioare
border-width Setează lățimea celor patru chenare
CSS Formulare
Formulare CSS
Aspectul unui formular HTML poate fi îmbunătățit mult cu CSS.
Stilizarea câmpurilor de intrare (Styling Input Fields)
Utilizați proprietatea width pentru a determina lățimea câmpului de intrare (input field).
Dacă doriți să stilați un tip de intrare specific, puteți utiliza selectori de atribute:
input [type=text] - va selecta doar câmpurile de tip text
input [type=password] - va selecta doar câmpuri de tip parolă
input [type=number] - va selecta doar câmpuri numerice
Padded Inputs
Utilizați proprietatea padding pentru a adăuga spațiu în câmpul text.
Când aveți multe intrări una după cealaltă, este posibil să doriți să adăugați și o anumită marjă (margin), pentru a adăuga mai mult spațiu în afara lor.
Bordered Inputs
Utilizați proprietatea border pentru a modifica dimensiunea și culoarea border-ului și utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite(corners rounded).
Dacă doriți doar un bottom border, utilizați proprietatea border-bottom.
Colored Inputs
Utilizați proprietatea background-color pentru a adăuga o culoare de fundal la intrare și proprietatea color pentru a schimba culoarea textului.
Focused Inputs
În mod implicit, unele browsere vor adăuga un contur (outline) albastru în jurul intrării atunci când va fi focalizat (faceți click pe). Puteți elimina acest comportament adăugând outline: none; la intrare.
Utilizați selectorul :focus pentru a face ceva cu câmpul de introducere atunci când este focalizat.
Intrare cu pictogramă / imagine(Input with icon/image)
Dacă doriți o pictogramă (icon) în interiorul intrării, utilizați proprietatea background-image și poziționați-o cu proprietatea background-position. Rețineți, de asemenea, că adăugăm un left padding mare pentru a rezerva spațiul pictogramei (icon).
Intrare de căutare animată(Animated Search Input)
În acest exemplu, utilizăm proprietatea CSS transition pentru a anima lățimea (width) intrării de căutare atunci când devine focus.
Styling Textareas
Utilizați proprietatea resize pentru a împiedica redimensionarea textului (dezactivați „grabber” din colțul din dreapta jos):
Styling Select Menus
Stilizarea butoanelor de intrare(Styling Input Buttons)
Formular responsiv(Responsive Form)
Redimensionați fereastra browserului pentru a vedea efectul. Când ecranul are o lățime mai mică de 600px, faceți ca cele două coloane să se stivească una peste alta, în loc de una lângă alta.
Interogări media pentru a crea un formular cu răspuns.
CSS Colțuri rotunjite
CSS Colțuri rotunjite
Cu proprietatea CSS border-radius, puteți da oricărui element "colțuri rotunjite" (rounded corners).
Proprietate CSS border-radius
Proprietatea CSS border-radius definește raza colțurilor unui element.
Această proprietate vă permite să adăugați colțuri rotunjite la elemente!
Colțuri rotunjite (rounded corners) pentru un element cu o culoare de fundal specificată.
Colțuri rotunjite (rounded corners) pentru un element cu bordură.
Colțuri rotunjite (rounded corners) pentru un element cu o imagine de fundal.
Proprietatea „border-radius” este de fapt o proprietate de tip shorthand pentru proprietățiile border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.
CSS border-radius - Specificați fiecare colț
Proprietatea border-radius poate avea de la una până la patru valori.
Patru valori - border-radius: 15px 50px 30px 5px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțului din dreapta sus(top-right corner), a treia valoare se aplică colțului din dreapta jos(bottom-right corner) și a patra valoare se aplică colțului din stânga jos(bottom-left corner)).
Trei valori - border-radius: 15px 50px 30px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners) și a treia valoare se aplică colțului din dreapta jos(bottom-right corner)).
Două valori - border-radius: 15px 50px; (prima valoare se aplică colțurilor din stânga sus și din dreapta jos(top-left și bottom-right corners), iar a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners)).
O valoare - border-radius: 15px; (valoarea se aplică la toate cele patru colțuri, care sunt rotunjite în mod egal).
Proprietăți CSS Rounded Corners
border-radius O proprietate shorthand pentru setarea tuturor celor patru chenare - * - * - proprietăți radius.
border-top-left-radius Definește forma marginii din colțul din stânga sus.
border-top-right-radius Definește forma marginii din colțul din dreapta sus.
border-bottom-right-radius Definește forma marginii din colțul din dreapta jos.
border-bottom-left-radius Definește forma marginii din colțul din stânga jos.
CSS Tooltip
CSS Tooltip
Creați tooltips cu CSS.
Un tooltip este adesea folosit pentru a specifica informații suplimentare despre ceva când utilizatorul mută indicatorul mouse-ului peste un element.
Basic Tooltip
Creați un tooltip care apare când utilizatorul mută mouse-ul peste un element.
HTML: Utilizați un element container (cum ar fi <div>) și adăugați-i clasa „tooltip”. Când utilizatorul trece cu mouse-ul peste acest <div>, va afișa textul de tip tooltip.
Textul de tip tooltip este plasat în interiorul unui element inline (cum ar fi <span>) cu class = "tooltiptext".
CSS: Clasa tooltip folosește position:relative, care este necesară pentru poziționarea textului tooltip (position:absolute).
Consultați exemplele de mai jos despre cum să poziționați indicatorul.
Clasa tooltiptext conține textul actual de tip tooltip. Este ascunsă în mod implicit și va fi vizibilă în hover (vezi mai jos). De asemenea, i-am adăugat câteva stiluri de bază: 120px lățime (width), culoare de fundal neagră, culoare text alb, text centrat (black background color, white text color, centered text) și 5px top și bottom padding.
Proprietatea CSS border-radius este utilizată pentru a adăuga colțuri rotunjite (rounded corners) tooltip text.
Selectorul :hover este utilizat pentru a afișa textul de tip tooltip atunci când utilizatorul mută mouse-ul peste <div> cu class="tooltip".
Positioning Tooltips
tooltip-ul este plasat la dreapta (left: 105%) a textului „hoverable” (<div>). De asemenea, rețineți că partea de sus:-5px (top:-5px) este utilizată pentru a-l plasa în mijlocul elementului container. Folosim numărul 5 deoarece textul de tip tooltip are o acoperire de 5px în partea de sus și de jos (top and bottom padding). Dacă măriți padding, creșteți și valoarea proprietății de top pentru a vă asigura că aceasta rămâne la mijloc (dacă este ceea ce doriți). Același lucru este valabil dacă doriți ca tooltip să fie plasat la stânga.
Dacă doriți ca tooltip să apară în partea de sus sau de jos ( top sau bottom), consultați exemplele de mai jos. Rețineți că folosim proprietatea margin-left cu o valoare de minus 60 pixeli. Acest lucru este pentru a centra tooltip deasupra/sub (above/below ) textul hoverable. Este setat la jumătatea lățimii tooltip-ului (120/2 = 60).
Instrumente săgeți (Tooltip Arrows)
Pentru a crea o săgeată (arrow) care ar trebui să apară dintr-o parte specifică a tooltip-ului, adăugați conținut „empty” după tooltip, cu pseudo-element class ::after împreună cu proprietatea content. Săgeata în sine este creată folosind borders. Acest lucru va face ca tooltip-ul să pară un speech bubble.
Adăugare săgeată la partea de jos a tooltip-ului.
Poziționarea săgeții în interiorul tooltip: top: 100% va așeza săgeata în partea de jos a tooltip. left: 50% va centra săgeata.
Proprietatea border-width specifică dimensiunea săgeții. Dacă schimbați acest lucru, modificați, de asemenea, valoarea margin-left. Aceasta va menține săgeata centrată.
Border-color este utilizată pentru a transforma conținutul într-o săgeată. Am stabilit top border la negru, iar restul la transparent. Dacă toate părțile ar fi negre, s-ar termina cu o black square box.
Adăugați o săgeată în partea de sus a tooltip.
Adăugați o săgeată la stânga tooltip-ului.
Adăugați o săgeată la dreapta tooltip-ului.
Fade In Tooltips (Animation)
Dacă doriți să aplicați fade în tooltip text când urmează să fie vizibil, puteți utiliza proprietatea CSS transition împreună cu proprietatea opacity și puteți trece de la a fi complet invizibil la 100% vizibil, într-un număr de secunde specificate (1 secundă în exemplul nostru).
CSS Stilizarea imaginilor
CSS Stilizarea imaginilor (CSS Styling Images)
Imagini rotunjite (Rounded Images)
Utilizați proprietatea border-radius pentru a crea imagini rotunjite (rounded images).
Imagini în miniatură (Thumbnail Images)
Utilizați proprietatea border pentru a crea imagini în miniatură (thumbnail images).
Imagine in miniatură (thumbnail image).
Imagine în miniatură ca link (Thumbnail Image as Link).
Imagini responsive (Responsive Images)
Imaginile responsive se vor regla automat pentru a se potrivi cu dimensiunea ecranului.
Redimensionați fereastra browserului pentru a vedea efectul.
Centrați o imagine (Center an Image)
Pentru a centra o imagine, setați marginea stângă și dreapta pe auto și transformați-o într-un element block.
Imagini / Carduri Polaroid (Polaroid Images / Cards)
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât este mai transparentă:
IE8 și versiunile anterioare folosesc filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Image Text
Cum se poziționează textul într-o imagine.
Filtre de imagine (Image Filters)
Proprietatea CSS filter adaugă efecte vizuale (precum estomparea și saturația/(blur and saturation) unui element.
Proprietatea CSS filter nu este acceptată în Internet Explorer, Edge 12 sau Safari 5.1 și nici în versiunile anterioare.
Image Hover Overlay
Creați un efect de suprapunere asupra hover.
Rotiți o imagine
Mutați mouse-ul peste imagine.
Galerie de imagini responsive
CSS poate fi utilizat pentru a crea galerii de imagini. Acest exemplu utilizează interogări media pentru a reorganiza imaginile pe dimensiuni de ecran diferite. Redimensionați fereastra browserului pentru a vedea efectul.
Image Modal (Advanced)
Modul în care CSS și JavaScript pot lucra împreună.
În primul rând, utilizați CSS pentru a crea o fereastră modală (dialog box) și ascundeți-o în mod implicit.
Apoi, utilizați un JavaScript pentru a afișa fereastra modală și pentru a afișa imaginea în interiorul modalului, atunci când un utilizator face click pe imagine.
CSS Butoane
Butoane CSS
Aflați cum puteți stabili butoanele folosind CSS.
Stilarea butonului de bază (Basic Button Styling)
Culorile butoanelor (Button Colors)
Utilizați proprietatea background-color pentru a schimba culoarea de fundal a unui buton
Mărimea butoanelor (Button Sizes).
Utilizați proprietatea font-size pentru a modifica dimensiunea fontului unui buton.
Utilizați proprietatea padding pentru a schimba umplerea unui buton.
Butoane rotunjite (Rounded Buttons)
Utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite la un buton.
Margini butoane colorate (Colored Button Borders)
Utilizați proprietatea border pentru a adăuga un chenar colorat la un buton
Butoane Hoverable
Utilizați selectorul :hover pentru a schimba stilul unui buton atunci când deplasați mouse-ul peste el.
Utilizați proprietatea transition pentru a determina viteza efectului „hover”.
Butoane Shadow
Utilizați proprietatea box-shadow pentru a adăuga umbre la un buton.
Butoane dezactivate (Disabled Buttons)
Utilizați proprietatea opacity pentru a adăuga transparență unui buton (creează un aspect „disabled”).
Puteți adăuga, de asemenea, proprietatea cursor cu o valoare „nepermisă” (not-allowed), care va afișa un „no parking sign” când faceți click peste buton.
Lățimea butonului (Button Width)
În mod implicit, dimensiunea butonului este determinată de conținutul textului său (la fel de larg ca și conținutul său). Utilizați proprietatea width pentru a modifica lățimea unui buton.
Grupuri de butoane (Button Groups)
Eliminați marginile și adăugați float:left la fiecare buton pentru a crea un grup de butoane.
Grup de butoane mărginite (Bordered Button Group)
Utilizați proprietatea border pentru a crea un grup de butoane mărginite.
Grup vertical de butoane (Vertical Button Group)
Utilizați display:block în loc de float:left pentru a grupa butoanele unul sub altul, în loc de alături
Buton pe imagine (Button on Image)
Adăugați un buton la o imagine.
Butoane animate (Animated Buttons)
Adăugați o săgeată la hover.
Adăugați un efect „apăsat” (pressed) pe click.
Fade in on hover.
Adăugați un efect „ripple” la click.
CSS Paginare
CSS Paginare
Aflați cum puteți crea o paginare responsive folosind CSS.
Paginare simplă
Dacă aveți un site web cu o mulțime de pagini, poate doriți să adăugați un fel de paginare la fiecare pagină.
Paginarea activă și hoverable
Evidențiați pagina curentă cu o clasă .active și folosiți selectorul :hover pentru a schimba culoarea fiecărei linii de pagină atunci când deplasați mouse-ul peste ele.
Butoane rotunjite active și hoverable
Dacă doriți un buton rotund „active” și „hover” adăugați proprietatea border-radius.
Efect de tranziție hoverable (Hoverable Transition Effect)
Adăugați proprietatea transition la link-urile paginii pentru a crea un efect de tranziție în timpul trecerii (hover).
Paginare mărginită (Bordered Pagination)
Utilizați proprietatea border pentru a adăuga borduri la paginație.
Margini rotunjite (Rounded Borders)
Adăugați rounded borders la prima și ultima dvs. legătură (link) din paginare.
Spațiu între legături (Space Between Links)
Adăugați proprietatea margin dacă nu doriți să grupați linkurile paginii.
Mărimea paginării (Pagination Size)
Modificați dimensiunea paginării cu proprietatea font-size.
Paginarea centrată (Centered Pagination)
Pentru a centra paginarea, wrap un element de tip container (cum ar fi <div>) în jurul lui cu text-align:center
Paginare Breadcrumbs
O altă variantă a paginării este așa-numita "breadcrumbs"
Grupa 16 sau grupa a VI-a principală
Grupa a VI-a principală a sistemului periodic, numerotată VI A sau 16, cuprinde elementele oxigen, O, sulf, S, seleniu, Se, telur, Te, și poloniu, Po.
Grupa 2 sau grupa a II-a principală
Grupa a II-a principală a sistemului periodic, numerotată II A sau 2, cuprinde elementele: beriliu, Be, magneziu, Mg, calciu, Ca, stronțiu, Sr, bariu, și radiu, Ra. Această grupă se mai numește grupa metalelor alcalino-pământoase.
Grupa 3 sau grupa a III-a secundară
Grupa a III-a secundară a sistemului periodic, numerotată III B sau 3, cuprinde elementele rare scandiu, Sc, ytriu, Y, și lantan, La, precum și elementul radioactiv actiniu, Ac.
