Share
CSS is een bekende, veel gebruikte taal voor websites. Met versie drie in de maak worden veel tijdbesparende functies geïmplementeerd. Hoewel alleen de modernste browsers deze effecten momenteel ondersteunen, is het nog steeds leuk om te zien wat er in de buurt is! In deze tutorial laat ik je vijf technieken zien.
Voordat we met deze zelfstudie beginnen, maken we de basismarkering waaraan we tijdens de zelfstudie zullen werken.
Voor onze xHTML hebben we de volgende div-elementen nodig:
Hiervoor zal onze xHTML zijn:
Een inleiding tot CSS3; Een Nettuts-zelfstudie 
In ons HTML-document hebben we enkele div-elementen gemaakt, met de bovenstaande ID's.
Laten we snel een basissc CSS-bestand maken.
body achtergrondkleur: #fff; #wrapper width: 100%; hoogte: 100%; div width: 300px; hoogte: 300 px; marge: 10px; zweven: links; / * rest van de code komt hier, later * /
Zoals u kunt zien, hebben we alle div-tags een breedte en hoogte van elk 300 px gegeven. We dwongen hen ook om naar links te zweven, waardoor we een pagina vol divs hadden om mee te spelen.
Het kan een gedoe zijn om afgeronde hoeken te maken. Eerst moet u de afbeeldingen maken. Vervolgens moet je meer elementen maken om de afgeronde hoeken als achtergrond in te stellen. Je weet hoe het gaat.
Dit probleem kan eenvoudig worden opgelost met CSS3, met de eigenschap "grensradius".
We zullen eerst een zwart div-element maken en het een zwarte rand geven.
De grens is er omdat we het moeten "uitvoeren" grens-radius eigendom.
We doen dit als volgt:
#round achtergrondkleur: # 000; grens: 1px vast # 000;
Nadat u de div hebt gemaakt, vernieuwt u de pagina. Je zou nu een zwarte, vierkante div zien met een breedte en hoogte van ongeveer 300px. Laten we nu werken aan de afgeronde hoeken. Dit kan worden bereikt met slechts twee regels code.
#round achtergrondkleur: # 000; grens: 1px vast # 000; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Zoals u kunt zien, hebben we twee bijna identieke regels toegevoegd, met als enige verschil "-moz" en "-webkit". -moz verwijst naar Mozilla Firefox en Safari / Google Chrome gebruiken de prefix -webkit.
Ververs je HTML-document en je ziet een afgeronde div - mooi en soepel. Goed, soepel ... In Firefox en Safari, ja, maar Chrome geeft een licht gepixelleerde rand.
Terug naar onze code, "border-radius"heeft een waarde nodig Deze waarde bepaalt de scherpte van de hoek, hoe groter de waarde, hoe ronder de hoek - net als in Photoshop. Naar mijn beste weten is er geen maximale waarde voor dit element.
Het creëren van traditionele afgeronde hoeken kan uw dag drastisch verminderen. Gelukkig lost CSS3 het op!
Deze eigenschap lijkt veel op onze vorige. Het gebruikt ook "grensradius", maar we zullen onze code enigszins aanpassen.
We doen het als volgt:
#indie background-colour: # 000; grens: 1px vast # 000; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
We hebben "direct" en "bottom right" toegevoegd aan onze code; dit verwijst naar de rechterboven- en rechterbovenhoek van het div-element. Met deze nieuwe eigenschappen kunt u eenvoudig een "tabachtige" functie implementeren.
De te gebruiken toevoegingen zijn "topright", "bottomright", "bottomleft" en "topleft".
Momenteel moet u verschillende CSS-regels schrijven om de dekking van elementen (hacks) aan te passen. Nogmaals, CSS 3 vereenvoudigt het proces.
Deze regel is ook gemakkelijk te onthouden, het is gewoon "dekking: waarde;". Makkelijk goed?
Onze code zal zijn:
#opaciteit achtergrondkleur: # 000; opaciteit: 0,3;
In Photoshop is het een triviale taak om slagschaduwen te maken. Wanneer u ze echter in uw webtoepassingen implementeert, slaat u de schaduw waarschijnlijk op als een afbeelding en gebruikt u deze als achtergrond. Niet meer! (In ieder geval voor de moderne browsers.) Helaas ondersteunen alleen Safari en Chrome de functie op dit moment.
De code heeft slechts één regel nodig, maar hij is vrij lang en heeft 4 verschillende waarden!
-webkit-box-shadow: 3px 5px 10px #ccc;
Voor de eerste waarde heb ik 3px gebruikt. Deze bepaalt de horizontaal afstand tussen de slagschaduw en het div-element. Meelevend bepaalt de tweede waarde, 5px, de verticaal afstand tussen de schaduw en de doos.
Toch is er een andere px-waarde, 10px. Dit is de straal van de schaduw - wat in het Engels de vervaging van de schaduw betekent, of hoe 'breed' de helling is.
Ten slotte bepaalt de laatste waarde de kleur van de schaduw. Dit betekent dat de schaduw niet alleen beperkt is tot grijswaarden; we kunnen ook rood (# f00) als waarde gebruiken, wat een heldere, rode schaduw oplevert.
Voor onze definitieve code komt het neer op het volgende:
#shadow background-colour: #fff; grens: 1px vast # 000; -webkit-box-shadow: 3px 5px 10px #ccc;
Zoals je kunt zien, heb ik de div een witte achtergrond, een zwarte rand en een lichtgrijze schaduw gegeven.
Met de meest recente versie van CSS is het mogelijk om de grootte van elementen te wijzigen. (Het werkt momenteel alleen in Safari.)
Met deze code is het mogelijk om een kleine driehoek in de rechteronderhoek van een element te laten verschijnen. U kunt het vervolgens slepen om de grootte te wijzigen. De te volgen code is wederom heel eenvoudig en vereist slechts één regel en wordt ondersteund door enkele oudere elementen die u misschien al kent. Dit zijn "max-width", "max-height", "min-width" en "min-height".
De code is als volgt:
# resize background-colour: #fff; grens: 1px vast # 000; formaat wijzigen: beide; overloop: automatisch;
In de code heb ik 2 extra regels gebruikt voor onze normale CSS, "formaat wijzigen: beide;" en "overflow: auto;". De regel met overflow is nodig om de grootte te vergroten, het kan elke "overflow" -waarde zijn, zolang het er maar is.
De andere regel die ik heb gebruikt is "formaat wijzigen: beide;". Deze regel geeft aan dat het element in beide kan worden vergroot of verkleind horizontaal en verticaal routebeschrijving.
Wat moet je uit dit artikel halen? In de komende jaren wordt je taak eenvoudiger, worden webpagina's sneller geladen en heb je meer tijd over voor je gezin! Hoewel je niet kunt vertrouwen op deze effecten om in alle browsers te werken, is er absoluut niets mis met het toepassen van een afgeronde hoek op een div in een browser, en niet de andere. Beschouw het als een upgrade!
Voor meer informatie over CSS3, kunt u http://www.css3.info bezoeken.
Accentsconagua