Illustrator CSS-stijlen kopiëren naar html

uit de cursus Website ontwerp met Illustrator

Illustrator CSS-stijlen kopiëren naar html
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Website ontwerp met Illustrator

perm_identity Belinda | video_library 41 video's | query_builder 02:20:39

Wil je websites ontwerpen, ben je vaardig in Illustrator en beheers je HTML en CSS dan leer je in deze cursus hoe je snel en efficiënt websites kunt ontwerpen in Illustrator. Je bent dan daarna nog vrij en flexibel om wijzigingen in je ontwerp te maken.

Het ontwerp kun je daarna omzetten in HTML en CSS. Ook als je geen HTML en CSS beheerst maar wel websites wilt ontwerpen om vervolgens bij een webbouwer aan te leveren is het handig om deze cursus te volgen.

De mogelijkheden en onmogelijkheden van webdesign

Heb je inzicht in de mogelijkheden en onmogelijkheden van webdesign dan helpt dit in de communicatie en samenwerking met de webbouwer. Je bespaart tijd als je niet het onmogelijke ontworpen hebt, maar leert werken binnen de begrenzingen van wat er mogelijk is met HTML en CSS. Je zult zien dat je ontwerp dan beter geschikt is om ook daadwerkelijk volgens jouw idee uitgevoerd te kunnen worden. Kortom ontwerp binnen de mogelijkheden!

 

Onderin het venster 'css-eigenschappen' vind je een dialoogvenster 'Exportopties'.

Als je daarop klikt. Dan kun je hier precies bepalen wat je wel en wat je niet wilt opnemen in de css.

Zo vind je bijvoorbeeld hier aangevinkt de positie en het formaat.

Deze kun je beter uitzetten op het moment dat je zelf gaat positioneren.

Ook als je zelf afmetingen wilt kunnen bepalen voor toepassingen in je html.

Kun je deze beter uitzetten.

Daarnaast worden er op dit moment niet één soort verloop geplaatst.

Maar inclusief alle prefixes nodig voor Webkit, Firefox, Internet Explorer en opera.

Ik zal deze nu in eerste instantie eerst uitzetten. Zodat je ziet wat dit als resultaat levert.

Natuurlijk wil ik eventuele maateenheden wel in pixels zien.

Ik klik op Oke. En je ziet dat direct de wijziging al wordt doorgevoerd.

Als ik klik op de knop 'Geselecteerde stijl kopiëren'.

Dan selecteert hij de volledige css-stijl, inclusief de selector.

Maar je kan ook zelf in het venster,

klikken en slepen voor die code die ik absoluut wil kopiëren.

En dan via Commando C, of Bewerken > Kopiëren. Ik keer terug naar Dreamweaver.

En plak opnieuw die kopie die ik zojuist heb gemaakt.

En dan betreft het nu alleen maar de stijlregel voor de background.

De voorvertoning van Dreamweaver, die zal bij de Live-voorvertoning.

Nu niet de background laten zien. Omdat Dreamweaver van Adobe is.

En Adobe werkt met de prefix Webkit. En die heb ik zojuist uitgezet.

Maar als ik ga kijken naar bijvoorbeeld een voorvertoning in Firefox.

Dan zie ik hier het verloop zoals ik deze heb gemaakt in Illustrator.

Daarom is het wel ontzettend handig dat je dus de prefixes aan kunt zetten in Illustrator.

En kan ik hier vervolgens weer voor alle aparte browsers de prefix laten genereren.

En daar wordt die code natuurlijk wel een stuk langer van. Maar als ik die nu weer kopieer.

Zonder de selector erbij. En ik keer weer terug naar Dreamweaver.

En ik vervang deze gradient voor de uitgebreidere.

Met alle prefixes voor de bewuste browsers erbij.

En ik bekijk opnieuw een voorvertoning in 'Live'.

Dan wordt omdat op dit moment een webkit-gradient aanwezig is.

Deze ook getoond in de Live-preview van Dreamweaver.

Om de eigenschappen van elementen in css te kunnen bekijken.

Is het eenvoudig een kwestie van deze te selecteren.

En hij wordt weergegeven in het venster CSS-eigenschappen.

Voor een heleboel vormgevings-eigenschappen doet hij dit prima.

Bijvoorbeeld, stel dat ik dit kader waar dit telefoonnummer in staat.

Wil gaan voorzien van ronde hoeken.

Dan kies ik bij Effect voor Omzetten in vorm > Afgeronde rechthoek.

Standaard hoort daar extra breedte omheen gegeven, die zet ik op .

En ik zet de Straal hoekafronding op pixels. En klik op OK.

Dan zie je dus direct dat deze css-eigenschappen 'border-radius',

keurig worden overgenomen als eigenschappen.

Ik kopieer deze eigenschap. Keer terug naar Dreamweaver.

En plaats deze voor het derde kader met de class="roundCorner".

Ook als je bijvoorbeeld slagschaduwen wilt creëren.

En ik gebruik daarvoor deze twee oranje delen.

Dan ga je naar Effect > Stileren. En kies je voor Slagschaduw.

Je kunt hierin ook even een voorvertoning in aanzetten.

Ik wil de vervaging wat kleiner maken. Verder staat deze helemaal goed ingesteld.

En ik klik op OK.

Zoals je ziet wordt er op dit moment geen automatische CSS gegenereerd.

En dat komt omdat ik twee elementen heb geselecteerd.

Als het er eentje was geweest dan was het wel gelukt.

Nu kun je wel meerdere elementen selecteren.

Alleen om de CSS te genereren moet ik dan onderin het venster klikken op CSS-genereren.

Dan bouwt hij nu twee aparte selectors. Met daarin de box-shadow.

Dan kan ik deze stijlregels die met de schaduw te maken hebben weer kopieren.

En in Dreamweaver weer plakken en toepassen.

De voorvertoning in Dreamweaver toont deze slagschaduw niet.

Maar als ik hem controleer in Firefox.

Dan zie ik dat deze slagschaduw wel aanwezig is.

En ook als ik deze vervolgens ook toon in Safari.

En dat is in principe ook dezelfde engine waarmee Dreamweaver werkt.

Alleen deze toont hem dus niet, maar in een browser wordt hij wel gewoon getoond.

Het venster CSS-eigenschappen staat nog in de kinderschoenen.

En ik verwacht dat er in de toekomst nog heel veel uitbreidingen op zullen komen.

Op dit moment zul je zien dat sommige kenmerken nog niet goed worden omgezet in CSS

Bijvoorbeeld als je een groep aanwijst.

Dan kan Illustrator hier geen duidelijke CSS-eigenschappen aan verbinden.

Omdat het allemaal om verschillende elementen gaat met verschillende inhouden.

Als ik inbreek in deze groep en één tekstje selecteer.

Dan kan Illustrator wel weer goed inzien wat de opmaak-eigenschappen hiervan zijn.

Op dit moment kan het venster al best wel handig zijn.

Zeker bijvoorbeeld voor de gradients. Of zoals in dit geval.

Een kader waar dan een Opacity op toegepast is.

En dat wordt dan keurig netjes via background:rgba. En de 'a' staat voor transparantie.

En die wordt op . gezet.

En dat komt goed overeen met inderdaad een dekking van inderdaad %.

Dus voor een heleboel zaken is het venster al prima te gebruiken.

Maar je zult zelf nog wel heel goed moeten kijken.

Welke code je wel wilt overnemen en welke code je niet wilt.

Welke code je wel wilt overnemen en welke code je niet wilt.