CODEWITHSUNDEEP
htmlcss
user3099947
user3099947

Reputation: 47

Trying to modify my CSS Logo with two lines of text in a circle

I'm trying to fix my website main logo. The name is Cerebro Design, and I would like to put Cerebro up and Design down, exactly like this:

Cerebro Design

This is the CSS code I have so far:

<div style="margin:auto;   
            width:500px;
            height:500px;
            border-radius:250px;
            font-size:50px;
            color:#fff;
            line-height:500px;
            text-align:center;
            background:#000;">
  CEREBRO DESIGN
</div>

Upvotes: 1

Views: 186

Answers (4)

Redy S
Redy S

Reputation: 372

Just add your text, no need to calculate any margin or padding.

.circle {
  width: 500px;
  height: 500px;
  margin: 20px auto;
  background: #000;
  border-radius: 50%;
  color: #fff;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 94px;
  text-align: center;
  white-space: nowrap;
}
 
.circle:before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-right: -0.25em;
  vertical-align: middle;
}
.circle > * {
  display: inline-block;
  max-width: 80%;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
<div class="circle">
  <span>CEREBRO<br>DESIGN.</span>
</div>

Upvotes: 0

Joel Azevedo
Joel Azevedo

Reputation: 616

Can you share the font you are using? My quick aproach (I'm in a small laptop) would be something like this:

HTML:

<div class="cerebro-logo">
    <span class="padding">Cerebro 
        <span class="design-text">Design .</span>
    </span>
</div>

CSS:

.cerebro-logo {
    margin:auto;   
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:70px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 600;
    color:#fff;
    line-height:80px;
    letter-spacing: 10px;
    text-align:left;
    background:#000;
    text-transform: uppercase;
}
.padding {
    padding-top: 165px;
    padding-left: 50px;
    float: left;
}
.design-text {
    letter-spacing: 13px;
}

Tip: You can use letter-spacing (for example) to get that spacing effect on the "Design .".

JSFIDDLE link: http://jsfiddle.net/f5qrbbx5/

Upvotes: 0

Mr.Web
Mr.Web

Reputation: 7154

#logo{
  margin:auto;   
  width:500px;
  height:500px;
  border-radius:250px;
  font-size:80px;
  color:#fff;
  text-align:center;
  background:#000;
}
#logo-text{
  margin-left:70px;
  padding-top: 160px;
  max-width:30px;
}
<div id="logo">
  <div id="logo-text">CEREBRO DESIGN.</div>
</div>

Then you just add the correct font and you should be good to go.

As a note, is better to use external or internal (<style>...</style>) css than using style="..." on an element.

Upvotes: 1

Juan
Juan

Reputation: 5050

i would use an image for the logo, but if you want to go css way, this could work for you.

Demo

div {
    margin:auto;
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
div:before, div:after{
    display:inline-block;
    position: absolute;
    color: white;
    font-size: 95px;
    width:500px;
    height:500px;
    text-align: center;
    left: 0;
}
div:before{
    content: 'CEREBRO';
    top: -10%;
}

div:after{
    content: 'DESIGN.';
    top: 10%;
}

Upvotes: 0

Related Questions