What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this?

Check out the picturehttps://i.stack.imgur.com/EfA26.png

View the code in action on JSFiddle

<div class="header">
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
    <p class="headingText">Hello</p>
</div>

.i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.headingText {
    color: white;
    background: black;
    display: inline-block;
    width: 350px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
htmlcsscss-shapes

Answer №1

Consider implementing the following CSS styles:

.navbar
{
  margin-top:30px;
  margin-left:50px;
  position:relative;
}
.icon
{
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  top:10px;
  left:20px;
}

.title
{
  color:white;
  background:black;
  display:inline-block;
  width:380px;
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
}

Answer №2

Achieving the desired effect is possible by using pseudo-classes and absolute positioning.

This answer works with your existing HTML markup, eliminating the need for any changes in that area and focusing solely on CSS modifications.

If necessary, additional padding can be added to space out the text further, allowing the background to adjust accordingly.

.header {
  position: relative;
  display: inline-block;
  margin: 30px;
  overflow: visible;
}
.header img.i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: 16px;
  left: -40px;
  z-index: 1;
  overflow: hidden;
  border: 3px solid black;
}
.header p.headingText {
  padding: 16px 32px 16px 80px;
  color: black;
  border: 3px solid black;
}
<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
  <p class="headingText">Hello</p>
</div>

Answer №3

Simply include position: absolute in the i class and adjust the margin of the headingtext:

HTML:

<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
  <p class="headingText">Hello</p>
</div>

CSS:

.i
{
  width:80px;
  height:80px;
  border-radius:50%;
  position: absolute;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
  margin: 40px 0 0 37px;
}

FIDDLE

Answer №4

To achieve the desired effect, consider using a block element with a negative margin applied to the top (half of the circle size minus half of the padding) and a margin added to the left (half of the circle size). Modify the following CSS:

.headingText {
    /*display: inline-block;*/
    display: block;
    margin-top: -45px;
    margin-left: 40px;
}

Check out this example fiddle for reference: https://jsfiddle.net/c67dchhv/

Answer №5

To keep it simple, just add the .header class position:relative; if you need to set a specific height and width, use .i class position:absolute; and apply margin to the .headingtext class. Check out this link for more information: https://jsfiddle.net/hamzanisar/aphzeyyt/, it may be helpful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Invoking functions within a jQuery extension

I've come up with this code to define the instance of my plugin: $.fn.someplugin = function(opts) { $(document).on('click', '.option-1', function() { alert(1); }); }; To make my plugin work, I utilize code similar to this ...

javascriptjqueryhtmleventsplugins

What is the process for creating a personalized user input in JavaScript?

When entering a tracking number, please ensure it follows this specific format: AB-CDEFG-H. The first character (A) must be a digit between 1 and 9 inclusive. The second character (B) should be an uppercase English letter. This is followed by a hyphen (-). ...

javascripthtml

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

htmlcssmedia-queries

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

javascriptjquerycss

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

Converting JSON information into a mailto hyperlink

Can anyone help me figure out how to encode a mailto link properly with JSON data in the query parameters, ensuring that it works even if the JSON data contains spaces? Let's consider this basic example: var data = { "Test": "Property with spaces" ...

javascripthtmljsonmailto

JavaScript salary calculation function not functioning properly

Once the user inputs the employee's name and the number of hours they worked on the HTML form, the submit button captures this information and stores it in variables for calculating their pay. The script also factors in overtime pay. Despite feeling l ...

javascripthtmlfunction

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

I am new to web development and currently facing a challenge in displaying SQL content on an HTML page. My stack includes Node.js, Express, and SQLite3. I have a folder named public containing HTML, CSS, and JS files. The objective is to retrieve a varia ...

javascripthtmlnode.jsexpress

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

htmlcsswordpressdivi

The ajax response is returning the entire page's html code instead of just the text content from the editor

I've been working with CKEditor and I'm using AJAX to send the editor's content via POST method. However, when I try to display the response in a div, the HTML for the entire page is being returned instead of just the editor's content. ...

javascriptphphtmlajaxckeditor

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

javascripthtml

What is the best way to update the content of a text area using PyScript?

Currently, I am in the process of developing a program that involves entering text, clicking a button, processing it, and then displaying the output on a textarea. However, I'm faced with an issue where the textarea fails to update as expected. I woul ...

htmltextareapyscript

Switch out the content when the button is clicked

Seeking a code snippet to enable clicking a button (Button labeled "Next") for replacing existing code on the page with new code. Current code below should be replaced, starting from the score counter section. Please excuse any messy code as I'm new a ...

javascripthtml

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

javascriptphphtmljquerylaravel

Navigating between pages using the ExpressJS and Angular 1 routing system

Can someone help me troubleshoot an issue I'm having with my Express API and Angular front-end? Whenever I try to access the /about route, it keeps defaulting back to index.html and displaying a 404 error message. Can you take a look at my code and pi ...

htmlangularjsexpress

When you hover over an image, its opacity will change and text will overlay

I am looking for a way to decrease the opacity and overlay text on a thumbnail image when it is hovered over. I have considered a few methods, but I am concerned that they may not be efficient or elegant. Creating a duplicated image in Photoshop with the ...

javascriptjqueryhtmlcssoverlay

Having trouble with CSS :before pseudo-element and sibling selector?

Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup. I attempted using a pseudo-element like so: summary:before { content: '\25BC'; } summary:before + .hide { con ...

css

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...

htmlcssinternet-explorer-7