How to create circular images with HTML5 and CSS!

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com

life·@nandibear·8 years ago

0.000 HBD

How to create circular images with HTML5 and CSS!

<center><img src="https://www.nandibear.com/img/border-radius-color-nandibear.com-html5-css.JPG"></center>

<center><h2>Making circle images with html5 and css is relatively easy!</h2></center>
<center>Many of you reading here likely already know how. However, this is for Steemians who would like the help.</center>

The image at the top of this post has been rounded and includes a border color.  If you'd like to do the same with one of your own images (a square, rectangular or whatever shaped image which you may have) please place the following code in your <strong>.ccs</strong> file or right inside in `<head></head>` tags of your <strong>.html</strong> file between the `<style></style>` tags -

>`.img-circular {border-radius: 50%;border: 2px solid #000;}`

You don't have to name it <strong>circular</strong>.  You may give it almost whatever name you want.

After that you may place the following code <strong>*</strong> in your .html file somewhere (wherever you want it to be displayed at) between the `<body></body>` tags -

>`<IMAGE class="img-circular" src="your-image-location/and-file-name-and-file.type" />`

What if you don't want the colored border?  Just get rid of the `border: 2px solid #000;` -

<center><img src="https://www.nandibear.com/img/border-radius-no-border-color-nandibear.com-html5-css.JPG"></center>

Those are the basics my fellow <strong>Steemians</strong>!  From there you may, if you desire to do so, add more style such as `height:300px ; max-width:300px ; width:100%`

Moreover, if you are working with a large picture which contains more than just the area that you want in the circle then you'll have to adjust the <strong>margin</strong> to get the circle over that area of the image.  For example, lets use this  image -

<img src="https://www.nandibear.com/blog-img/defcon23-physical-bitcoins-ometeotl-gold-silver-2016-nandibear.com.jpg">

If we use the circular code provided near the top of this post we get this (which is fine) &darr; &darr; &darr;

<center><img src="https://www.nandibear.com/img/border-radius-for-wide-image-adjust-nandibear.com-html5-css.JPG"></center>

<center><h2>However, what if you want to move the circle around to another area of the image?</h2></center>

You'll need to add a margin element and adjust it to get the circle over the area (of the picture) that you desire.  You'll also need to create a <strong>div class</strong> -

>`.circle-adjust {display: inline-block; position: relative; width: 400px; height: 400px; overflow: hidden; border-radius: 50%;} `

Now somewhere (wherever you want the image to appear at) in your .html file use the above class to make a div class (insert this)-

>`<div class="circle-adjust">      </div>`

You'll also need to create another class (<strong>this is where we'll use the margin element</strong>) for the image itself -

>`.circle-adjust img {width: auto; height: 100%; margin-left: -150px; margin-top: -20px;}`

Now within your .html file, between the previously inserted `<div> </div>` tags, place the following code <strong>*</strong>-

>`<IMAGE src="your-image-location/and-file-name-and-file.type" />`

<center> <strong>And we get this! &darr;  &darr; &darr;</strong></center>

<center><img src="https://www.nandibear.com/img/border-radius-for-wide-image-adjusted-nandibear.com-html5-css.JPG"></center>

I hope that all, or at least some, of the foregoing was helpful to someone here at <strong>Steemit</strong>!  If you have any questions please feel free to ask below in the comments!

<strong>* IMPORTANT NOTE -</strong> Within all of the foregoing post I placed a "<strong>*</strong>" in two spots.  This is because in the <strong>code</strong> cited directly below each I was forced to use the word <strong>IMAGE</strong> in lieu of <strong>img</strong> because Steemit was trying to render an image (which of course doesn't exist) from the code and it wouldn't allow me to post.  <strong>PLEASE change <em>IMAGE</em> to <em>img</em> if you want the code to work for you.  Thanks!</strong>

<center>/////</center>

<center><a href="https://nandibear.com/"><img src="https://nandibear.com/img/nandibear.com.jpeg"></a></center>

<center><strong>Thanks for stopping by and reading!</strong></center>

<center><strong>PLEASE leave some comments!  Talk a little!</strong></center>

<center><strong><a href="https://steemit.com/@nandibear">Steemit.com/@nandibear</a></strong><strong> and <a href="https://nandibear.com/">NandiBear.com</a></strong></center>

👍 jalaluddin, jones420, bago, l00t, i-f, h-a, x-x-x, r-e, u-s, t-v, e24, e23, e21, e12, iroc-z, f46, f45, f35, f34, f32, e70, f31, f30, f25, f23, f22, f21, f20, f16, f15, f13, f12, f11, f10, f03, f02, f01, e38, e91, e61, phatez, e60, e46, e39, e36, e34, e32, e28, shake, pain, employee, weapon, reveal, tradition, traditional, popularity, statement, buf, impact, theory, exploit, finish, tonight, visit, seats, guesses, laughter, check, comedian, stage, sister, hooked, hook, skiller, present, feelings, meeting, meet, pressure, happen, decades, decade, risen, respond, spiced, race, colors, past, quickly, throw, fight, seek, south-park, thundersnow, snowing, vengance, snape, anthem, brawl, vivify, forver, buz, invert, shaders, evasive, ghetto, karambit, warlord, placebo, pii, genii, mallard, yuu, wyvern, hammantola, shocker, bomber, verse, paragon, cobalt, ichor, augment, within, exile, venom, phenomenon, radii, chem, colossus, pseudo, deity, dedicated, dome, them, curry, crypto-expo, offset, educators, hike, pipe, ladybug, station, button, breakfest, banked, involve, material, letter, termite, opportunity, realize, century, catch, worker, piece, streets, half, produce, center, wear, society, thanks, breaks, town, views, return, frontline, effort, rolemodel, suggestion, homie, senpai, expect, serve, maybe, force, hangover, results, levels, parent, whether, once, later, include, winners, often, service, move, program, such, show, mean, really, need, those, find, finally, eestlane, thepunisherr, medicbtom, airwavez, corganmusic, kumaranvpl, proctologic, nrg, ubg, jerseyjohn, flaforester1977, theassailant, platin01, sandrajordan483, sk2045, kishore1988, accomplish, vallurivikram, federico77, nandibear, kevin2011, snowstorm231, chitnaingoo, eztechwin, bryla, jhoggar, jamie-smith, roomservice, randowhale, randowhaletrail, carlobelgado, joanaltres, godswill, neskor, synapse, abdlhakim, muhammadridha, hrx, saeryn, azh, africka, firecat, linuxphreak, vcs.bharadwaz, liki, glyuk63, safwan.efendi,

properties (23)vote details (244)