CSS3 Border Radius inschakelen in Internet Explorer 8 en lager

CSS3 geeft ons de mogelijkheid om afgeronde hoeken te maken met de eigenschap randradius. Maar zoals u wellicht al weet, wordt deze nieuwe functie niet herkend in Internet Explorer 8 (IE8) en eerdere versies. Dus wanneer u CSS3 Border Radius toepast op een element, verschijnt het nog steeds als een doos met puntige tips.

Mogelijk vindt u veel verschillende adviezen op het internet, waardoor u IE8 zou kunnen negeren. Je zou willen dat je dat kon. Maar als u op een website werkt voor een overheidsinstelling of een bank, heeft u misschien geen keuze. U moet de website er nog steeds net zo mooi laten uitzien als in moderne browsers, inclusief de mogelijkheid om CSS3 Border Radius toe te passen.

Als u uw website IE8-klaar moet maken, terwijl u de CSS3-functie kunt gebruiken, hebben we alleen de tip voor u.

CSS3Pie

CSS3Pie is een soort polyfill voor CSS3 decoratieve functies. Afgezien van CSS3 Border Radius die we in dit artikel gaan bespreken, ondersteunt CSS3Pie ook Box Shadow en Gradients, hoewel het beperkt is tot het type Lineaire Gradient.

Download CSS3Pie (hier). Zet het in je projectdirectory - ik plaatste het in de css- map. Zoals je ook kunt zien aan de hand van de onderstaande schermafbeelding, heb ik één stylesheet en één HTML-bestand gemaakt.

Open de stylesheet in de code-editor en stel een van de elementen in het HTML-bestand in met afgeronde hoeken, zoals:

 .border-radius {height: 100px; breedte: 100 px; achtergrondkleur: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; grensradius: 50px; } 

Omdat de breedte en hoogte van het element beide 100 px zijn en de grensradius is ingesteld op 50 px, wordt het element een cirkel:

In IE8, zoals we verwachten, zou het nog steeds een vierkant (zucht) zijn, maar maak je geen zorgen.

Als u het afgeronde behavior: url(css/pie.htc); wilt inschakelen, voegt u deze regel toe: behavior: url(css/pie.htc);, zoals zo.

 .border-radius {height: 100px; breedte: 100 px; achtergrondkleur: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; grensradius: 50px; gedrag: url (css / pie.htc); } 

Houd er rekening mee dat het bestandspad in url() een absoluut pad moet zijn of relatief ten opzichte van het HTML-bestand. U kunt deze regel ook in een apart bestand toevoegen.

Mogelijk hebt u een stylesheet die is bestemd voor Internet Explorer. U kunt behavior: url(css/pie.htc); in dat bestand, maar zorg ervoor dat het wordt gedeclareerd in dezelfde CSS-selector, zoals zo.

 / * gedeclareerd in ie.css * / .border-radius {behaviour: url (css / pie.htc); } 

Ververs de pagina in IE8. De afgeronde hoek zou nu moeten werken (ta-da!). Het zou ook in IE7 moeten werken.

Probleemoplossen

Internet Explorer kan onverwacht gedrag vertonen. Als dit niet werkt (misschien werkt de afgeronde hoek niet of is het geselecteerde element verdwenen), dan zou het probleem moeten worden opgelost door de position en zoom toe te voegen:

CSS3 Pie gebruiken in WordPress

U bent klaar met het plaatsen van uw website in HTML-vorm. Je gebruikt ook pie.htc op de website om CSS3 in IE8 in te schakelen. In deze fase bent u klaar om de website te transformeren in een functionerend WordPress-thema. In dit geval, aangezien WordPress dynamisch is en pagina's kunnen worden weergegeven in URL's van verschillende niveaus, moeten we een absoluut pad opgeven.

U kunt het pad in CSS op deze manier wijzigen:

 .border-radius {behaviour: url (http: // localhost / {website} / wp-content / themes / {the_theme} /css/pie.htc); positie: relatief; zoom: 1; } 

Of voeg interne stijlen toe in header.php, op deze manier:

Laatste gedachte

Het hebben van coole dingen zoals CSS3 Border Radius werk in IE8 is fascinerend, en CSS3Pie maakt dat mogelijk, terwijl het ons een minder reden geeft om IE8 te haten.

Best Game of Thrones-lettertypen en teksteffecten tot nu toe

Een van de grootste en meest besproken fantasiedrama op televisie, Game of Thrones heeft een mammoet van een publiek over de hele wereld gefascineerd. Van spreekwoorden tot merchandise heeft Game of Thrones geleid tot een groot aantal dingen in ons dagelijks leven.Omdat ontwerpers een goede bijdrage leveren aan het fandom Game of Thrones, zijn er veel lettertypen en teksteffecten gemaakt door de beroemde serie als inspiratie te gebruiken

(Technische en ontwerptips)

20 bijzonder verslavende mobiele games die je moet proberen

Elke dag worden we wakker met een gamescape die vol zit met nieuwe inzendingen, waardoor het perfect matchende spel steeds ongrijpbaarder wordt. Als je nog niet hebt geprobeerd om je telefoonervaring te spelen met gameplay, laat onderzoek zien dat je het echt moet proberen, voor het goede verstand als niets anders - en een van de beste redenen om dit te doen is om stress te verlichten

(Technische en ontwerptips)