Photoshop Question posted in
The official user guide can be found here.

How can I create this logo without using an actual image with HTML and CSS? – Photoshop

I have created this logo in Photoshop, but I thought I could make this with html and CSS, I’ve tried to create it how I thought I could but I want to have it on the right hand side of my site but the p tags have a large width and it made the scroll bars appear, which I don’t want. How can I create this logo while keeping it on the right hand side of my site with no scroll bars?

please view in full page to see the logo

  html {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* W3C */
  }
  
  ul {
  position: absolute;
  bottom: 0%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 500px;
  line-height: 120px;
  padding-right: 40px;
  }
  
    
  ul li {
  list-style-type: none;
  color: #fff;
  font-family: Arial, "sans-serif";
  font-size: 1.2em;
  display: inline;
  padding-left: 40px;
  }
  
  a {
  text-decoration: none;
  color: #fff;
  }
  
 a:hover {
  padding-top: 40px;
  background: url(images/dot.png) top center no-repeat;
  color: lightgrey;
  }
  
  .main_logo {
  position: absolute;
  top: 150px;
  right: 20px;
  width: 500px;
  height: 250px;
  color: #fff;
  padding: 5px;  
  font-size: 2em;
  font-family: Arial;
  }

.largetext {
	font-size: 8em;
	margin: 0;
    padding: 0;
	
}

#logo_text {
    position: relative;
    bottom:200px;
    left: 150px;
}

#logo_text p {
    font-size: 0.7em;
    line-height: 12px;
}
  
  @media screen and (min-width: 568px) and (max-width: 1024px){
		 .main_logo {
		  top: 150px; 
		  position: absolute;
		  right: 60px;
		  width: 290px;
		  height: 150px;
		  }
			
		  #tag {
			  height: 70px;
			  top: 0px;
			  left: -20px;
		  }
			
		  #tag2 {
			  left: 150px;
			  top: 0px;
		  }
			
		  #logo_text {
			top: 70px;
			left: 70px;
			font-size: 0.7em;
			
		  }
		  
		  ul li {
		  font-size: 1.1em;
		  }
		  
		  ul {
		  position: absolute;
		  bottom: 5%;
		  margin-left: auto;
		  margin-right: auto;
		  left: 0;
		  right: 0;
		  width: 490px;
		  line-height: 30px;
		  }
		  
		  nav a:hover {
		  padding-top: 20px;
		  background: url(images/dot_medium.png) top center no-repeat;
		  }
		  }
		  
		  
   
<body>
	<div class = "main_logo">
	<p class = "largetext"><&nbsp;&nbsp;&nbsp;></p>
            <div id = "logo_text">
			<p>John Smith</p>
            <p>Web Designer/Developer</p>
			</div>
        </div>
	</div> 
</body>

</html>
Tags:

2

Answers


  1. 0

    Add display:inline-block to #logo_text. It’s block level by default, which when pushed over will cause the scroll bar to appear.:

      html {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #73C8A9 10%, #373B44 90%); /* W3C */
  }
  
  ul {
  position: absolute;
  bottom: 0%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 500px;
  line-height: 120px;
  padding-right: 40px;
  }
  
    
  ul li {
  list-style-type: none;
  color: #fff;
  font-family: Arial, "sans-serif";
  font-size: 1.2em;
  display: inline;
  padding-left: 40px;
  }
  
  a {
  text-decoration: none;
  color: #fff;
  }
  
 a:hover {
  padding-top: 40px;
  background: url(images/dot.png) top center no-repeat;
  color: lightgrey;
  }
  
  .main_logo {
  position: absolute;
  top: 150px;
  right: 20px;
  width: 500px;
  height: 250px;
  color: #fff;
  padding: 5px;  
  font-size: 2em;
  font-family: Arial;
  }

.largetext {
	font-size: 8em;
	margin: 0;
    padding: 0;
	
}

#logo_text {
    position: relative;
    bottom:200px;
    left: 150px;
    display:inline-block;
}

#logo_text p {
    font-size: 0.7em;
    line-height: 12px;
}
  
  @media screen and (min-width: 568px) and (max-width: 1024px){
		 .main_logo {
		  top: 150px; 
		  position: absolute;
		  right: 60px;
		  width: 290px;
		  height: 150px;
		  }
			
		  #tag {
			  height: 70px;
			  top: 0px;
			  left: -20px;
		  }
			
		  #tag2 {
			  left: 150px;
			  top: 0px;
		  }
			
		  #logo_text {
			top: 70px;
			left: 70px;
			font-size: 0.7em;
			
		  }
		  
		  ul li {
		  font-size: 1.1em;
		  }
		  
		  ul {
		  position: absolute;
		  bottom: 5%;
		  margin-left: auto;
		  margin-right: auto;
		  left: 0;
		  right: 0;
		  width: 490px;
		  line-height: 30px;
		  }
		  
		  nav a:hover {
		  padding-top: 20px;
		  background: url(images/dot_medium.png) top center no-repeat;
		  }
		  }
		  
		  
       
<body>
	<div class = "main_logo">
	<p class = "largetext"><&nbsp;&nbsp;&nbsp;></p>
            <div id = "logo_text">
			<p>John Smith</p>
            <p>Web Designer/Developer</p>
			</div>
        </div>
	</div> 
</body>

</html>
    Login or Signup to reply.
  2. 0

    Simple solution using a couple of pseudo elements

    JSfiddle Demo

    HTML

    <div id="logo_text">
    <p>John Smith</p>
    <p>Web Designer/Developer</p>
</div>

    CSS

    #logo_text {
    position: absolute;
    top:150px;
    left:250px;
    color: #fff;
    padding: 5px;
    font-size:2em;
    font-family: Arial;
  }
#logo_text:before, #logo_text:after {
    font-size:7em;
    position: absolute;
    top:50%;
    transform:translate(-100%, -50%);
}
#logo_text:before {
    content:"<";
    left:0;
    transform:translate(-100%, -50%);
}
#logo_text:after {
    content:">";
    left:100%;
    transform:translate(0%, -50%);
}
#logo_text p {
    font-size: 0.7em;
    line-height: 12px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search