[Tutorial] Bilder abrunden mit CSS

Freitag, 10. April 2015


Hey meine lieben,

ich will eine neue Rubrik in meinen Blog einführen. Diese soll sich um das Thema HTML und CSS drehen. In der letzten Zeit habe ich mich damit etwas auseinander gesetzt und bin echt überrrascht was man alles damit machen kann. Vielleicht geht es ja euch genauso und ihr habt noch nicht sonderlich viel Ahnung von dem Thema. 

Heute soll es erst mal um ein kleines Tutorial gehen wie man die Ecken bei den Bildern abrundet. Das habe ich erst kürzlich gesehen und muss sagen es gefällt mir um einiges besser als die eckigen Ränder. Was meint ihr dazu? Runde oder eckige Ecken?

Heute will ich euch kurz zeigen wie ich es gemacht habe. Dieses Tutorial bezieht sich auf Blogger, ob es auf anderen Plattformen klappt weiß ich leider nicht. Vorab die Anleitung habe ich mir nicht selbst ausgedacht, sondern auf dem Blog von Mary gefunden. Aber da ich es sehr hilfreich fand, wollte ich es nochmal auf meinen Blog posten. Also ich hoffe es ist verständlich für euch, sonst einfach nachfragen.

Genug geredet, fangen wir mal an:

1. Zu aller erst müsst ihr das CSS Feld öffnen. Das macht ihr so: Unter Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen

2. Wenn ihr alle Bilder auf euren Blog abrunden wollt, dann gebt folgenden Code ins Feld ein:

img{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}


Dabei stehen die Pixel dafür wie stark die Ecken abgerundet werden. Also so lange ändern bis es euch gefällt. Bei 20 px sehen die Ecken so aus:



Ich finde es sieht gleich viel besser aus. Warum der Code so lang ist, ist schnell erklärt: Man muss jeden Browser einzeln sagen, das er die Bilder abrunden soll.

3. Es gibt auch eine Möglichkeit die Ecken der Bilder nur in den Posts abzurunden. Dafür müsst ihr folgendes im CSS einfügen:

.post img{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}


Wenn ihr den Code einfügt, rundet ihr nur die Ecken von den Bilder innerhalb der Posts ab. Den habe ich auf meinen Blog eingefügt. Es gibt auch noch ein Code, wo man nur spezielle Bilder abrunden kann. Das lass ich jetzt hier erst mal außen vor. Falls er euch interessiert könnt ihr gerne fragen.

Ich hoffe das kleine Tutorial war hilfreich für euch und jeder hat es verstanden. Gefallen so kleine Tipps euch? Ich kann gerne öfter mal so welche Posts schreiben mit Tipps in Sachen HTML/CSS.
 

Kommentare

  1. Ein total schönes Tutorial, Liebes! Ich werde es auf jeden Fall mal ausprobieren.
    LG Susie
    Go Carpe That Diem

    AntwortenLöschen
  2. Great post!

    http://helderschicplace.blogspot.com/2015/04/western.html

    AntwortenLöschen
  3. Abgerundete Ecken sind toll, ich bin allerdings froh, wenn ich nicht selbst programieren muss :)
    Ich erfreue mich schon daran, das mein eigener Blog jetzt online ist und es so einfach war.

    AntwortenLöschen
  4. Tolles Tutorial! Ich werde mich auf die nächsten schon freuen.
    Lg Nina
    littlesweetwooorld.blogspot.de

    AntwortenLöschen
  5. I am regular reader, how are you everybody? This piece
    of writing posted at this web site is truly fastidious.



    Here is my weblog: Revive RX Skin Care

    AntwortenLöschen
  6. Beautiful pictures

    Love Vikee
    www.slavetofashion9771.blogspot.com

    AntwortenLöschen
  7. Ist ja toll, dass du jetzt auch über solche Themen postest, gefällt mir. :) Ich mag zwar abgerundete cken meist nicht so gern, dennoch finde ich den Post toll und freue mich auf weitere. :)
    liebst Elisabeth-Amalie

    AntwortenLöschen
  8. Great blog and interesting post, dear!
    I love your design!

    xoxo




    MY BLOG CLICK

    AntwortenLöschen
  9. Thank you for visiting my blog , follow you (№823), please follow back ))) waiting for you )
    http://mosaictrends.blogspot.com/

    AntwortenLöschen
  10. Tolle Tipps! Ich probiere das auf meinem Blog gleich mal aus!♥
    Dankeschön!
    Liebste Grüße alex

    icecold7.blogspot.de

    AntwortenLöschen
  11. Beautiful blog! Following you now on GFC, twitter, Facebook! Hope you follow me too x

    http://lifeofacameo.blogspot.co.uk/

    AntwortenLöschen
  12. Hey babe, how are you?
    Great post though, i love it, thanks for sharing..
    Follow back if you don't mind.. :P

    New 'DIY' post on my blog..
    Visit me whenever you have time;

    www.its-dominica.blogspot.co.uk

    Anyway have a good day!
    Kisses xXx

    AntwortenLöschen

Ich freue mich über jedes Kommentar! Ich freue mich auch über Lob oder Kritik. Verbesserungsvorschläge und Ideen für neue Post sind natürlich auch immer willkommen.


Lasst mir doch euren Link zu eurer Homepage da, ich schaue gerne vorbei :)

________________________________________________________________________________

I´m happy for every Comment on my Blog! I am also glad to hear your opinion and if you have suggestions for improvement please tell me this.

Leave me the link to your website so i can take a look on that :)

Love <3

Related Posts Plugin for WordPress, Blogger...

Template Created By Dinosaur Stew || All Rights Reserved