Given the above dynamically generated text (meaning that I can't just use an image), I am trying to recreate the design using just html and css selectors.
I would like to just use a single h4 with the containing text, but am open to other solutions. I would prefer to not use absolute positioning, but again, if that is the only way, then so be it.
I have tried surrounding with span tags, but those are inline elements that don't have an inherent width.
The h4 will be nested within a div, though not always of the same class or id.
Any ideas or resources to get me started?
Check out how they do the text underneath Contact me on this form. Pretty clean and simple. http://www.onextrapixel.com/examples/html5-css3-contact-form/
Here is the actual CSS that does it:
h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}
Sorry for yet another edit, but here is an explanation. h1 { ... } styles the actual text, so "Event Schedule" for you, and h1:before { ... } does the cool line effect. h1:after { ...} does the ampersand, so this is actually where you would put your text i suppose
What you can do is to wrap your text with a span and put it inside a container div.
<div id='container'>
<span id='text'>EVENT SCHEDULE</span>
</div>
Then give your container border-bottom and less height than your text (half size should give you the effect you are looking for).
#container {border-bottom:solid 1px #333; text-align:center; height:10px;}
#text { background:#fff; padding:0 20px; }
You can see the live example here: http://jsfiddle.net/vzjxA/13/
Related
So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:
Text on top of HR line 3px
As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.
In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:
I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.
What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.
So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.
Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#toptext p {
margin: 0;
}
#line {
height: .5px;
background-color: #03f;
margin-top: -15px;
}
<div id="toptext">
<p>MatthewTheBottleFlipper</p>
<hr id="line"/>
</div>
Hide the <hr> and try adding the line to the paragraph.
Like this:
#toptext p {
border-bottom: 1px solid red;
line-height: 66px;
}
Then adjust the line-height.
remove all the excess css overkill and lets keep life simple :)
HTML
<p>MatthewTheBottleFlipper</p>
CSS
p {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
border-bottom:solid 1px #000; /* u need this */
padding-bottom:3px /* ...and this */
}
The p tag naturally has margins and padding. Just remove it, and everything will work how you want:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}
p { padding: 0; margin: 0; }
I'm looking to overlap the same texts right on top of each other for an interesting idea I had on syntax highlighting.
I'm trying to do it with the textarea in the foreground, and the div in the background.
After setting the same position of the elements as well as the same font size, they still do not overlap perfectly. What am I missing, exactly?
Fiddle
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
}
set a same font-family for both
textarea has 1px border so you can add border:1px solid transparent to div which has the text so that it aligns
* {
margin: 0;
padding: 0;
}
div{
border:1px solid transparent
}
div,
textarea {
position: absolute;
top: 0;
left: 0;
background: transparent;
font-size: 1em;
line-height: 1em;
font-family: arial;
}
<div>Hello, world!</div>
<textarea>Hello, world!</textarea>
Try setting the font-family, padding, and border-width explicitly:
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:sans-serif;
padding:0;
border-width:0;
}
Two comments:
Browsers define a default style for textarea elements, so the trick is to figure out what properties are being set by the browser and override those explicitly. It's best to override the properties on both the div and the textarea. If you only change the div to accommodate for the browser's default style of the textarea, you'll get varying results in different browsers. For example, in Chrome the default border width for a textarea is 1 pixel, while in Firefox, it's 2 pixels.
Due to the way font anti-aliasing works, you'll always get a slightly bold effect. Probably best to set one of the two font colors to white or transparent.
Try this :-
Link
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:arial /*add same font-family */
}
and
div{
padding:3px 3px 0
}
Is this possible to create following effect using CSS. I only have a H2 element in HTML, and i do not have any control on HTML of the page. I can only change CSS.
I tried it with :before and :after but no success so far.
This will be used in a CMS, so i can not be sure how or where end user will be adding headings.
I think your best shot would be (since you cannot edit any of the HTML and you want a CSS only solution) to play a little with the position and z-index of the container and the h2:after pseudo element:
HTML:
<div id="wrapper">
<h2 class="heading">New Collection </h2>
</div>
CSS:
#wrapper {
width:100%;
height:800px;
background:green;
position:relative;
z-index:-2;
}
.heading {
display:inline;
background:green;
}
.heading:after {
content:'';
display:inline-block;
width:100%;
height:20px;
background:#d3d3d3;
position:absolute;
right:0;
z-index:-1;
}
Check this FIDDLE, I know it's not that fancy, but I think you cannot do more than that using CSS only.
Hope this helps.
The simplest way that I know of is to put a span inside of the H2, but still around the inner text, then apply one style to the span and one style to the H2.
EDIT: You can use a little bit of jQuery to add the span inside your H2 tags.
HTML:
<h2><span>New Collection</span></h2>
CSS:
h2 {
font-family: sans-serif;
font-weight: normal;
font-size: 16px;
background: #eee;
color: #999;
}
h2 span {
padding-right: 10px;
background: #fff;
}
jQuery:
$(document).ready(function() {
$('h2').each(function() {
var title = $(this).html();
$(this).html('<span>' + title + '</span>');
});
});
Here's a Demo
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
I was able to get it working with a white background:
But in cases where the background isn't white, the solution doesn't work as well:
It should be quite obvious what I did any why it doesn't work (negative margin + background set to background color). Are there any solutions to make it always look good?
One way would be to use spacer spans along with a wrapper (in this case header), with all elements with display set so they appear as table-cells (example).
HTML
<header>
<span class="spacer"></span><!-- Place this wherever you want the border -->
<h1>Title</h1>
<!-- Spacing is automatically added next to elements (but not on ends) -->
<span class="spacer"></span>
View Blog
</header>
CSS
header {
display:table-row;
line-height:1.5em;
font-size:2em;
white-space:nowrap; /* Prevent titles from wrapping when more than one word is used */
}
header h1 {
font-size:inherit; /* Change font-size in header */
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
header span.spacer { /* Makes spacers stretch */
display:table-cell;
width:50%;
}
header span.spacer { /* Adds spacing on both sides of spacers */
padding:0 10px;
}
header span.spacer:first-child { /* Adds spacing only on right side of first spacer */
padding:0 10px 0 0;
}
header span.spacer:last-child { /* Adds spacing only on left side of last spacer */
padding:0 0 0 10px;
}
header span.spacer:after { /* Adds border to spacer */
display:inline-block;
width:100%;
content:".";
font-size:0;
color:transparent;
height:2px;
background:#000;
vertical-align:middle;
position:relative;
top:-1px;
}
header > a { /* Styles links according to example */
font-size:.4em;
vertical-align:middle;
background:#25a2a4;
color:#fff;
text-transform:uppercase;
font-family:monospace;
border-radius:.5em;
padding:.3em .5em;
text-decoration:none;
}
Are you putting the text and the button in a div whose background is set to white? It is hard to tell what you are doing without showing the CSS.
If you are using a div with background, why not just remove it? Or if there is some constraint why not set the background to rgba(#,#,#,0.0)?
background:rgba(255,255,255,0.0);
The alpha property helps set the level of opacity.
You can use a <fieldset> tag to accomplish this.
Example: https://jsbin.com/tovuwimezu/edit?html,css,output
HTML
<form>
<fieldset>
<legend class="blogLegend">New Blog Post</legend>
blog details here
</fieldset>
</form>
CSS
.blogLegend {
font-weight: 600;
color: rgb(63, 169, 196);
padding: 10px;
text-align: center;
}