Tekstbox met ronde hoeken
Tegenwoordig zie je op vee websites tekstboxen met ronde hoeken. Veelal zijn die met behulp van plaatjes gemaakt, maar dat kan ook op een andere manier, zodat je die plaatjes niet nodig hebt. Alleen maar door CSS goed te gebruiken. Voor de afgeronde hoeken maken we gebruik van bullets.
Het eerste wat je moet doen is een 'div' maken die gaat fungeren als tekstbox. In iedere hoek plaatsen we vervolgens een kleinere 'div'. In elk van deze hoeken plaatsen we een div met een groot bullet punt. We gaan deze punten zo neerzetten dat er maar een kwart van die cirkel zichtbaar is. Laten we maar aan de code beginnen.Nu moeten we de stijl schrijven zodat we de juiste verschijning produceren.
het gebruik van het lettertype is wel van belang hier. We hebben in ons voorbeeld Arial gebruikt. Daarnaast moet je er rekening mee houden dat de tekstbox statisch is en wanneer je het groter wilt zul je dus wat moeten veranderen aan height en width van .box en # content en de top en left van de positie en bullet-divs. Hieronder zie je het eindresultaat als je alles goed doet.
