I have a tab that is currently residing on the left side of my screen. What I would like to do is move it to the right side and also move it up some. I will post what I have for it residing on the left side:
CSS
#feedback {
position: fixed;
left: 0;
bottom: 0;
height: 250px;
margin-left: -3px;
margin-bottom: -3px;
}
#feedback-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 120px;
height: 42px;
background-color: rgba(0,0,0,0.5);
margin-top: 60px;
margin-left: -42px;
padding-top: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#feedback-tab:hover {
background-color: rgba(0,0,0,0.4);
}
HTML
<div id="feedback">
<div id="feedback-tab">Feedback</div>
</div>
I think this is what you want.
CSS:
#feedback {
position: fixed;
right: 0;
bottom: 150px;
height: 250px;
margin-left: -3px;
margin-bottom: -3px;
}
#feedback-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 120px;
height: 42px;
background-color: rgba(0,0,0,0.5);
margin-top: 60px;
margin-right: -42px;
padding-top: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#feedback-tab:hover {
background-color: rgba(0,0,0,0.4);
}
AND HTML:
<div id="feedback">
<div id="feedback-tab">Feedback</div>
</div>
Try this:
#feedback {
position: absolute;
right: 0;
bottom: 0;
height: 250px;
margin-right: -3px;
margin-bottom: -3px;
}
Also, not knowing the parent of this element can difficult the answer, in my opinion.
Related
I have the following code
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
<div class="heart"></div>
However, I need this shape to become a submit button for a form. So I created a button instead with the same class name:
<button type="submit" class="heart"></button>
I'd assume that a button can still just look exactly the same. I've done some reading and noticed i need to have border: none; which I've added, but the shape is still not the same as it was when it was a div.
Remove the default padding and border of the button and you are good to go.
.heart {
float: left;
margin: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0; /*added code*/
border: none; /*added code*/
outline:none;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
button.heart:active,
button.heart:active:after,
button.heart:active:before {
background-color: #e80202;
box-shadow: inset 1px 1px 1px #c50b0b;
}
<div class=heart>
</div>
<button type="submit" class="heart"></button>
Note: You can also change the style a little when is clicked by using
:active selector.
The button has default padding applied to it. Remove that in addition to the border:
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0;
border: 0;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
The html for this css is simply:
<button type="submit" class="heart"></button><br><br>
<div class=heart>
</div>
How do I get this ribbon to be on of my bootstrap page as the top layer? Solid color and solid text.
html:
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
CSS:
/* The ribbons */
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* Custom styles */
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-left{
top: auto;
bottom: 25px;
left: -50px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}
As it is now the ribbon in on the same "level" as the background. Meaning that youtube iframe links etc. will go on the top of the ribbon.
I use this template:
https://blackrockdigital.github.io/startbootstrap-agency/
If you would recommend me to use another code, please let me know.
Just use z-index:
/* The ribbons */
.corner-ribbon{
width: 200px;
background: #e43;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
/* Pay attention! */
z-index: 1;
position: fixed;
}
/* Custom styles */
.
corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-left{
top: auto;
bottom: 25px;
left: -50px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}
.annoying_block{
position: absolute;
bottom: 10px;
left: 10px;
width: 50vw;
height: 100px;
background-color: red;
}
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
<div class="annoying_block">
</div>
If I understand correctly, what you're looking for is the z-index property.
.corner-ribbon{
z-index: 100;
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
I have the following view icon for articles:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
As you can see the ".activeArticle" rotates the icon around 45 degrees.
Why is this happening? Am I missing something in the pseudo elements?
How can I fix it/How can I scale it without rotation? (transform/rotate will scale the icon back to the original size)
You are resetting your transform when you specify scale for activeArticle - use this:
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
Demo below:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
<div class="viewIcon"></div>
<br/>
<br/>
<div class="viewIcon activeArticle"></div>
Use rotate() & scale() transform property combined, just like this:
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
Hope this helps!
I've following HTML code:
<div id="wrap2">
<div id="shape2">
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
</div>
</div>
And following CSS code:
#shape2 {
width: 140px;
height: 140px;
position: fixed;
top: 60px;
left: 60px;
}
#shape2:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0px 0 20px rgba(255,255,255,0.6);
}
#moveTop{
position: fixed;
top: 42px;
left: 80px;
color: #000;
width: 100px;
height: 40px;
text-align: center;
}
#moveRight{
position: fixed;
top: 110px;
left: 148px;
color: #000;
width: 100px;
height: 40px;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#moveDown{
position: fixed;
top: 178px;
left: 80px;
color: #000;
width: 100px;
height: 40px;
text-align: center;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#moveLeft{
position: fixed;
top: 110px;
left: 12px;
color: #000;
width: 100px;
height: 40px;
text-align: center;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
How to do properly navigation with arrows? I mean that If user have mouseover arrow to move top #moveTop it should change background of that "white" border within angel x to y to color #eee.
There's example of my full code: https://jsfiddle.net/L9aeu4o3/6/
So if I'm right here, you want the arc behind the arrow to be highlighted?
To do that you need to place a div between your <a>tags, like so:
<a href="#" id="moveTop">
<i class="ion ion-arrow-up-b"></i>
<div id="highlightTop"></div>
</a>
looks horrible doesn't it?
and in your CSS you are going to want to do the following:
#moveTop:hover #highlightTop {
position: fixed;
top: 41px;
left: 41px;
width:140px;
height:140px;
border: 19px solid #eee;
min-width: 4em;
min-height: 4em;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
z-index: -1;
}
It's a fiddly solution, but there's no jquery, just a pure CSS/HTML solution.
Here's the jsfiddle!
I'm trying to place rotated text in a div next to another div, which is "fixed" to the right-side of the browser window. The structure I'm aiming for is this:
However, I'm having complications rotating the text and getting the positioning correct. Here is what I've tried:
HTML Markup
<div id='feedbackslider'>
<div class='feedback-title'>
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</u
</div>
</div>
CSS:
#feedbackslider {
background-color: #fff;
position: fixed;
right: -25px;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: relative;
z-index: 9999;
right: 75px;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
float: right;
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}
And here's how my attempt looks:
It's getting close, but I would like the list (red border) flush against the top of the main container, and I'd also like "feedback" to occupy it's own space to the left of the list but still within the container.
There might be an easier way of doing this, but I'm not sure.
Any assistance would be greatly appreciated! I can provide clarification if needed :)
If you are trying to have the title in the middle even if the content grows, you can try this
HTML
<div id='feedbackslider'>
<div class='feedback-title'>
<span> <!--Added this span-->
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</span>
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</u
</div>
</div>
CSS
#feedbackslider {
background-color: #fff;
padding: 0;
position: fixed;
right: -25px;
top: 50%;
z-index: 9999;
display: table; /*Added this*/
border-spacing: 10px; /*change this spacing according to your need*/
}
/*added this css for title*/
.feedback-title {
display: table-cell;
width: 20px;
margin-right: 5px;
height: 100%;
border: 1px solid #ccc
}
/*added this css for inner span*/
.feedback-title span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
left: -19px;
margin-top: -10px;
position: absolute;
text-align: center;
top: 50%;
width: 78px;
z-index: 9999;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
display: table-cell; /Added this/
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}
Here is some modification to your css.
http://jsfiddle.net/hv4neuf3/
#feedbackslider {
background-color: #fff;
position: fixed;
right: 0;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: relative;
z-index: 9999;
right: 90px;
top: 85px;
text-align: center;
font-size: 20px;
border: 1px solid #000;
}
#feedbackslider:hover .feedback-title {
color: #fff;
}
#feedbackslider .feedback-list {
border: solid 1px #000;
float: right;
}
#feedbackslider .feedback-list ul {
width: 140px;
padding: 0;
list-style: none;
margin: 0;
}
#feedbackslider li{
padding: 9px 5px;
}
Try This
UPDATED CSS
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 9999;
/*Add This CSS*/
left: -54px;
margin-top: -10px;
position: absolute;
text-align: center;
top: 50%;
width: 78px;
}
Try this and let me know if its close enough.
CSS:
#feedbackslider {
background-color: #fff;
position: fixed;
right: -25px;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 9999;
float:left;
margin-top:20px;
margin-right:-20px;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
float: left;
padding:10px;
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}
HTML:
<div id='feedbackslider'>
<div class='feedback-title'>
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</ul>
</div>
</div>