CSS/LESS allow content to grow while keeping div centered vertically - css

I have a banner that ends with a triangle(arrow) that has to stay centered vertically overlapping the slideshow below it. The amount of text/content that it will accept can grow dynamically. Is there a way to style this so that as the text increases the arrow will stay centered as you see below. Below is the styling that I have to achieve the screenshot below.
.carousel {
position: relative;
margin-top:3.5em;
padding-bottom:5%;
.header {
position: absolute;
top:-2em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top:-3.5em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after {
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
}
React Component HTML:
{headerClass} = either .header or .headerWithTag depending if there is a subtitle(h3 tag).
<div className="carousel">
<div className={headerClass}>
<h1>{headerText}</h1>
<h3>{this.props.subTitle}</h3>
</div>
<div className="slideShow">
<div>
<div ref="wrapper" className="master-slider ms-skin-default" data-qa={thisName + '_masterslider'}>
{slides}
</div>
</div>
</div>
</div>

So the solution is to use top:0; transform: translate(0, -50%) to shift the header up half its height from the top of the slide:
.header {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after{
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
Quick demo: http://jsfiddle.net/7ky4wvz6/1/

Related

How do center an image within another image and have it responsive to mobile landscape?

I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%

CSS - Why does pattern overlap button?

Here's my JS fiddle: https://jsfiddle.net/aeh8hxys/
Can somebody please tell me why (and how to stop!) the pattern overlaps my button? Thanks!
CSS:
.pattern
{
width:500px;
height:300px;
background-color: #FF0000;
}
.pattern:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "\0020";
opacity: .5;
z-index: 0;
}
and HTML:
<div class="pattern">
<button class="btn btn-info">This is a button</button>
</div>
Because the pattern is "positioned" (a position value other than static), and has a z-index, which means it will appear over the button, which is non-positioned and has no z-index.
To make the button appear over the pattern, give it a position other than static and a z-index higher than pattern.
https://jsfiddle.net/aeh8hxys/1/
.pattern
{
width:500px;
height:300px;
background-color: #FF0000;
}
.pattern:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "\0020";
opacity: .5;
z-index: 0;
}
button {
position: relative;
z-index: 1;
}
<div class="pattern">
<button class="btn btn-info">This is a button</button>
</div>

Add text to fixed preloader

I'm trying to add a loader (spinner gif + text) that is fixed in the middle of the browser window while waiting for an AJAX response. So far I managed to position my gif correctly, but I have a bit of a trouble when it comes to anchoring the text to the loader.
CSS:
.preloader-bg {
background: rgba(22, 22, 22, 0.3);
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
#preloader {
background-image: url(images/preloader.gif);
background-repeat: no-repeat;
background-position: center;
position: fixed;
display: block;
left : 0;
bottom : 0;
right : 0;
top : 0;
}
HTML:
<div class="preloader-bg">
<div id="preloader">
</div>
</div>
I show and hide the preloader using jquery during ajax calls. I want to anchor the text to the bottom part of the loader. I'm a begginner when it comes to designing layouts and css so any tips would be huge. Thanks!
.preloader-bg {
background: rgba(22, 22, 22, 0.3);
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
#preloader {
background-image: url(http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437);
background-repeat: no-repeat;
background-position: center;
position: fixed;
display: block;
left: 0;
right:0;
top:0;
bottom: 0;
}
#preloader p{
position: absolute;
left: 0;
right: 0;
bottom: 50%;
/* top:0; */
display: inline-block;
text-align: center;
margin-bottom: -5em;
}
<div class="preloader-bg">
<div id="preloader">
<p>text here</p>
</div>
</div>
Here is the Demo
I would do it like this: https://jsfiddle.net/kvduL2nj/
HTML
<div class="preloader-wrapper">
<div class="preloader">
Loading...<br/>
And whatever you want to have here.
</div>
</div>
CSS
.preloader-wrapper {
background: rgba(22, 22, 22, 0.3);
width: 100%; height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.preloader-wrapper > .preloader {
background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
position: absolute;
min-width: 128px; /* image-width of loader */
min-height: 128px; /* image-height of loader */
box-sizing: border-box;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-top: 148px; /* 128px image-height of loader + 20px margin */
text-align: center;
}
The preloader-wrapper is the one that should be position:fixed. Inside the actual preloader should be horizontally and vertically centered. The rest is commented in the CSS.

setting opacity for background image with url in css

I am using bootstrap along with HTML5 to develop a website.
I have a website header.
I wish to have an image in the website header with some opacity value and also some text in it.
I have referred this link setting opacity for background image and tried implementing it. I have got the text but not the image.
Here is the code:
HTML:
<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>
CSS:
.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}
.head .hbg
{
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
z-index: -1;
}
What is the issue here?
.head .bg doesnt exist in the code above. Change to .hbg.
How about this instead?
<div class="page-header head">
Hi there
</div>
-
.head{
width: 300px;
height: 250px;
display: block;
position: relative;
}
.head::after {
content: "";
background: url(hbg.png);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
You need to add position: absolute; top: 0; left: 0; to .hbg and width and height of 100% so it spreads all over the parent container:)
.head {
position: relative;
z-index: 1;
margin-top: 10px;
height: 170px;
}
.head .hbg {
position: absolute;
top: 0px;
left: 0px;
background: url('http://gillespaquette.ca/images/stack-icon.png');
background-size: cover;
opacity: 0.3;
z-index: -1;
width: 100%;
height: 100%;
}
<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>

Creating a hexagon in CSS, symmetry

I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner.
The current css:
.hexagon.outer {
width: 318px;
height: 452px;
position: relative;
}
.hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
background-repeat:no-repeat;
background-color: #585858;
}
.hexagon.outer:before, .hexagon.outer:after {
content: "";
position: absolute;
width: 262px;
height: 262px;
top:95px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.5deg) skew(22.5deg);
transform: rotate(54.5deg) skew(22.5deg);
}
.hexagon.outer:before {
left: -130px;
}
.hexagon.outer:after {
left: 186px;
}
.hexagon.outer span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
.hexagon.inner {
width: 276px;
height: 372px;
position: relative;
margin:0 auto;
top: 40px;
z-index:4;
}
.hexagon.inner, .hexagon.inner:before, .hexagon.inner:after {
background-repeat:no-repeat;
background-color: white;
}
.hexagon.inner:before, .hexagon.inner:after {
content: "";
padding:0;
margin:0;
position: absolute;
width: 215px;
height: 215px;
top:79px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.7deg) skew(22.5deg);
transform: rotate(54.7deg) skew(22.5deg);
}
.hexagon.inner:before {
left: -107px;
}
.hexagon.inner:after {
left: 169px;
}
.hexagon.inner span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
The HTML:
<div class="hexagon outer">
<div class="hexagon inner">
</div>
</div>
Example: http://jsfiddle.net/jK7sH/
The outer hexagon will have an (background) effect in the end, that is why there are two (inner and outer).
I tried to align them by trial and error, but I don't think that works because the :before and :after rectangles are skewed.
Is it possible to create a symmetric hexagon with just CSS without the use of borders?
Thanks in advance for all information!
hexagone is 8 sides , isn't it ?
you could give a try with background linear-gradient
http://dabblet.com/gist/5767212
hover them to and see how it reacts while width increase.

Resources