I am new to web development (and self taught) so please excuse if this is a dumb question.
How do I show text inside an icon? Such as number inside a heart etc.
I assuming for this purpose webfont icon will not work?
Is using CSS shapes is better for thus purpose - so that it will render when resized etc?
Or is vector better option.
Here is the CSS for heart that I was planning to use. But I am not clear as how to display text inside.
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
trans.orm-origin :100% 100%;
}
Thanks in advance!
Here is my solution
I inserted a span between the div tags. That way, like mbratch said, you can set the z-index property as a higher value. This, along with position:absolute, will give you what you are looking for.
I used jQuery to vertically center it, in case you wanted multiple lines of text
Related
I try to setup the position of diffrent images on a site. I use the Avada Theme to create a basic column layout (3 colums, 2 rows) and css to make more specific configurations on it. My divs, which are containing the img's have IDs I use.
#note_col1_row1{
position: relative;
z-index: 1001;
top: 5%;
left: 3%;
-webkit-transform: rotate(-2deg) scale(1.3);
transform: rotate(-2deg) scale(1.3);
}
#note_col2_row1{
position: relative;
z-index: 1001;
bottom: 4%;
left: 4%;
-webkit-transform: rotate(4deg) scale(1);
transform: rotate(4deg) scale(1);
}
#note_col1_row2{
position: relative;
z-index: 1001;
left: 2%;
bottom: 22%;
-webkit-transform: rotate(2deg) scale(1.2);
transform: rotate(2deg) scale(1.2);
}
#note_col3_row1{
position: relative;
z-index: 1000;
top: 4%;
left: 5%;
width: 170px !important;
-webkit-transform: rotate(-2deg) scale(1.2);
transform: rotate(-2deg) scale(1.2);
}
#note_col2_row2{
position: relative;
z-index: 1000;
top: 5%;
left: 5%;
-webkit-transform: rotate(-4deg) scale(1.3);
transform: rotate(-4deg) scale(1.3);
}
#note_col3_row2{
position: relative;
z-index: 1000;
bottom: 15%;
-webkit-transform: rotate(2deg) scale(0.8);
transform: rotate(2deg) scale(0.8);
}
So now my problem is, if I load the page the bottom,top... positions don't apply to the divs. This only happens if I start the debug view via F12 and change a value to any other (for example "bottom: 22%;" to "bottom: 21%;").
Is there any reason why this behaves like this and any possibilty to solve the problem?
Try setting position to absolute rather than relative like this:
#note_col1_row1
{
position: absolute;
...
}
div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform
.tp-banner {
width: 100px;
height: 60px;
-webkit-transform: translate(0px, 0px) translateZ(0px);
transform: translate(0px, 0px) translateZ(0px);
}
.tp-border-bottom {
position: relative;
width: 100px;
height: 60px;
}
.tp-border-bottom:after {
content: "";
position: absolute;
font-size: 0;
line-height: 0;
background-color: #e1e1e1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform-origin: 0 1px;
-ms-transform-origin: 0 1px;
transform-origin: 0 1px;
}
.tp-border-scale:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
/*#media only screen and (-webkit-min-device-pixel-ratio: 3) {
.tp-border-bottom:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
}*/
<div class="tp-banner"></div>
<div class="tp-border-bottom tp-border-scale"></div>
Try to add this style to all the transformed elements:
-webkit-backface-visibility: hidden;
Taken from similar question CSS3 hover effects make weird impact on other elements in Chrome
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
The pseudo :before works on Firefox, Safari but not in Chrome.
Its a square box rotated to form a diamond shape. But, using :before the bg is again rotated backwards and given a position fixed. It gives a really nice effect !
Check My Site :
www.wangeltmg.com
When you scroll at first, the background overlaps and creates blurry image to get cleared.. !
All i did is
#element3
{
width: 1000px;
height:1000px;
line-height: 5em;
margin: 0px auto;
border: 0px solid #666;
border-radius: 3px;
margin-top:150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
overflow: hidden;
left:0; right:0;
top:10%;
}
#element3:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -10%;
z-index: 0;
background: url(../img/custom11.jpg) 0 0 no-repeat fixed;
background-size:135% 135%;
background-position:140px -315px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Is there anything to work on regarding the compatibility with Chorme ?
I would love to have your answers fellas.
Thanks.
Your CSS background is behaving bizarre on chrome because you needed to add:
-webkit-transform CSS 3 transform with prefix for Chrome.
.parallax-two #element3 {
border: 0 solid #666666;
border-radius: 3px;
height: 1000px;
left: 0;
line-height: 5em;
margin: 150px auto 0;
overflow: hidden;
position: absolute;
right: 0;
top: 10%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 1000px;
}
http://fiddle.jshell.net/mmvdz/6
http://fiddle.jshell.net/mmvdz/6/show/
For Firefox, Chrome, Opera, IE etc. it is preferred to add the vendor prefix CSS3 versions as well. It is needed for older versions of Firefox as well for example.
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
If you use editor like Sublime Text to code manually. You have plugins which add this vendor prefix automatically.
http://www.hongkiat.com/blog/css-automatic-vendor-prefix/
I do see that you have another problem on Chrome. The fixed div has issues with z-index. And it seems it has to do with CSS 3 transform properties for webkit which makes the triangle appear above the fixed div but without the blur effect in Chrome.
#home-wrap {
-webkit-backface-visibility: hidden;
}
I'm trying to position one element to the left and one to the right of the browser window, both contains an ul with CSS transform rotate. I have managed to position .rotate-left and its ul to the left, but I have been unable to position the ul inside .rotate-right to the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.)
CSS:
.rotate-left ul li,
.rotate-right ul li {
display: inline;
}
.rotate-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-left ul {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
}
.rotate-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-right ul {
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(90deg) translate(-50%, 50%);
-moz-transform: rotate(90deg) translate(-50%, 50%);
}
HTML:
<div class="rotate-left">
<ul>
<li>left</li>
<li>left</li>
<li>left</li>
</ul>
</div>
<div class="rotate-right">
<ul>
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
-
Demo: http://codepen.io/anon/pen/FtyEG
I have built upon this 100% height block with vertical text.
I solved it and cleaned the code up a bit.
.left,
.right {
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
}
.left {
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
.right {
right: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(90deg) translate(50%, 50%);
-moz-transform: rotate(90deg) translate(50%, 50%);
-ms-transform: rotate(90deg) translate(50%, 50%);
-o-transform: rotate(90deg) translate(50%, 50%);
transform: rotate(90deg) translate(50%, 50%);
}
Demo: http://codepen.io/anon/pen/LHeaB
I think that I get it more or less right. It would be:
.rotate-right ul {
-webkit-transform-origin: 78% 100%;
-webkit-transform: rotate(90deg) translate(0%, 0%);
You don't need to translate if you choose ok the transform origin; going to 78% would be to compensate for the li width