All the available solutions in Stackoverflow only work for Bootstrap 4. I want to know a way to change Carousel indicators to circles instead of rectangles
I tried this:
.carousel-indicators [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: 10px; /* change width */
height: 10px; /* change height */
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.5;
transition: opacity 0.6s ease;
border-radius: 100%; /* add border-radius */
}
but got this result:
Changing the height property has absolutely no effect on the indicators
I have just checked the carousel indicators in Bootstarp , setting proper with and height along with proper border radius giving me circled indicatores.
Please check the edited below code this may help you. this was working for me or can you share a demo link to the problem
.carousel-indicators [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: 10px;
height: 10px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .5;
transition: opacity .6s ease;
border-radius: 50%;
}
Related
I'm working on some buttons that fill with a color when you hover over the button. The transition works perfectly on safari that runs on a MacBook. But when I do the animation on my windows device with Chrome, it has a hiccup on the end with multiple flashes. I have searched around for a solution but I couldn't find any.
.button_slide {
color: black;
border: 2px solid #ffffff;
border-radius: 0px;
padding: 18px 45px;
display: inline-block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
letter-spacing: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #ffffff;
/* -webkit-transition: ease-out 0.4s !important;
-moz-transition: ease-out 0.4s !important; */
transition: ease-out 0.4s;
}
.slide_diagonal:hover {
box-shadow: inset 400px 50px 0 0 #007ACC;
border: 2px solid #007ACC;
}
#outer {
position: relative;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
width: 364px;
/*margin: 50px auto 0 auto;*/
text-align: center;
}
<div id="outer">
<div class="button_slide slide_diagonal">KLIK HIER</div>
</div>
Reason of hiccup
The answer from DreamTeK helped out to point out the issue. It looks like that when a transform transform: translate(-50%,-50%); is applied to #outer, Chrome will hiccup the animation. The only question that will be left is, why does this cause the issue?
edit: typos, extra information
I wasn't able to pinpoint the exact reason Chrome has issues with the box-transition however I used a differant method that creates the same effect much smoother.
#outer {
width: 220px;
margin: 50px auto;
text-align: center;
}
.button_slide {
position: relative;
color: black;
border: 2px solid #ffffff;
padding: 18px 45px;
display: block;
font: 14px "Lucida Console", Monaco, monospace;
letter-spacing: 5px;
text-decoration: none;
cursor: pointer;
transition: ease-out 0.4s;
width: 100%;
box-sizing: border-box;
}
.button_slide::before {
content: '';
box-shadow: inset 0 0 0 0 #fff;
transition: ease-in-out 0.4s;
border: 2px solid #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
z-index: -1;
}
.slide_diagonal:hover::before {
box-shadow: inset 300px 50px 0 0 #007ACC;
border-color: #007ACC;
}
<div id="outer">
<a class="button_slide slide_diagonal">KLIK HIER</a>
</div>
I just want to add a border for the image with padding also I need transition effect. It's working fine but has a few problems :
it shows little movements in the image on hover(not fixed)
Transitions not smooth.
I tried everything.
I applied box-sizing:border-box; and gave the image a margin of 2px and removed it on hover but still no luck.
See this example. It's perfectly fine and the image is not moving on hover.
Here is my code :
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img {
border-radius: 50%;
margin: 2px;
transition: 0.2s ease-in-out;
}
.home-item1 img:hover {
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>
What am I missing? Please check the fiddle and let me know.
jsfiddle
This will work for you:
I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it.
Fiddle
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border: 4px solid transparent;
border-radius: 50%;
padding: 0px;
transition:all 0.2s ease-in-out;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/110/110/" alt="">
</div>
Hope this was helpfull.
First, You need to add transparent border to image so that it
will not move when hovered.
Second, Increase the duration of transition to get smooth effect
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 50%;
margin: 2px;
transition: border 0.5s ease-in-out;
border: 2px solid transparent; /* Added */
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px; padding: 2px;
}
<div class="home-item1">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
adding a border will add to the dimensions of the div which causes the movement.. adding color to a transparent border will not, it achieves the same effect.
I think all you need to do is to boost the transition period and just add border to the image so that the border could be seen for a good time on hover, thus showing a watery like, a bit moving effect to the image. Here it goes :
.home-item1 {
height: 105px;
width: 105px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 60%;
margin: 2px;
transition: border 0.6s ease-in-out;
border: 3px solid transparent;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/150/150/" alt="">
</div>
I faced a little problem. I'm implementing the web-site design and need to implement a bit complicated button style (attached here). I have no idea how to make that using only CSS.
It's gonna be a few button styles and one of its must be with transparent background and must get background color from element where this button is placed. I implemented button with custom background that can be set using CSS. But it's not flexibly to use. If I want to use it on the different backgrounds you should add new style like "btn-customColor" etc. Now I have styles for transparent background and it looks:
The point is that I can't cut or hide the part of bottom block under top block with transparent background. I can set color and it will be like first image. But it restricts usages of buttons. I could use btn-transparent instead btn-blue, btn-green, btn-white, etc.
I had another idea to draw buttons in photoshop, but it's not really good approach and there are a lot of "no" here. Maybe is it possible to implement using canvases or smth. like that? If it's, would be great if you shared a few links for articles and so on.
There are staff that is available to use: HTML, CSS, JS (jQuery).
I hope I explained what the problem is.
Any ideas and help is appreciated.
Thank you for your time.
.btn-base {
padding: 0;
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s;
}
.btn-base>div {
position: relative;
width: 101%;
left: 3px;
bottom: 8px;
padding: 5px 15px;
outline: none;
border-radius: 3px;
background: #e4645d;
/* hardcoded code, must be transparent */
border: 2px solid #fff;
font-size: 12px;
}
<button type="submit" class="btn-base btn-transparent">
<div>Button example</div>
</button>
Consider using pseudo-elements as an alternative solution.
This method is demonstrated against x3 varying background colours in the code snippet embedded below.
Code Snippet Demonstration:
.row {
padding: 20px;
}
.row:nth-child(1) {
background: #e4645d;
}
.row:nth-child(2) {
background: #5dace4;
}
.row:nth-child(3) {
background: #5fe45d;
}
.btn-base {
padding: 0;
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s;
/* added */
position: relative; /* required for absolutely positioned pseudo-elements */
padding: 0px 10px;
}
/* Additional */
.btn-base:before {
content: "";
position: absolute;
width: 7px;
height: 30px;
border: 2px solid #fff;
border-right: 0;
right: 100%;
bottom: -5px;
top: 5px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
}
.btn-base:after {
content: "";
position: absolute;
border: 2px solid #fff;
height: 9px;
border-top: 0;
border-left: 0;
right: 5px;
left: 0;
bottom: -9px;
border-bottom-right-radius: 3px;
box-sizing: border-box;
}
<div class="row">
<button type="submit" class="btn-base btn-transparent">Button example</button>
</div>
<div class="row">
<button type="submit" class="btn-base btn-transparent">Button example</button>
</div>
<div class="row">
<button type="submit" class="btn-base btn-transparent">Button example</button>
</div>
You could do that with only, box shadow property
body{
background:#e4645d;
text-align:center;
}
.btn-base {
padding: 10px;
margin: 0;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s
color:white;
box-shadow: -10px 10px 0 -2px #e4645d, -10px 10px 0 0px white;
}
<button type="submit" class="btn-base btn-transparent">
Button example
</button>
Here's how I'd do it. Please note I changed the markup, making them siblings of a common wrapper. I used background-color: inerhit. Proof of concept:
.btn-base {
padding: 0;
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s;
color: white;
position: absolute;
width: 100%;
}
.button-holder>div {
color: white;
position: relative;
width: calc(100% + 2px);
left: 5px;
bottom: 8px;
padding: 5px 15px;
outline: none;
border-radius: 3px;
background-color: inherit;
border: 2px solid #fff;
font-size: 12px;
box-sizing: border-box;
}
body {
background-color: teal;
}
.button-holder {
background-color: inherit;
display: inline-block;
position: relative;
}
<div class="button-holder">
<button type="submit" class="btn-base btn-transparent"></button>
<div>Button example</div>
</div>
For modern browsers (except IE/Edge) you can use the clip-path css property and create a polygon to clip the element on the back to only show the parts you want.
This will make it truly transparent, in the sense that it can appear even over images.
body{background:url('https://placeimg.com/640/480/animals') no-repeat;}
.btn-base {
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
border: 2px solid currentColor;
font-size: 12px;
transition: 0.5s;
padding: 5px 15px;
font-size: 12px;
position:relative;
background:transparent;
color:#fff;
cursor:pointer;
}
.btn-base:before {
content:'';
position: absolute;
width: 100%;
height:100%;
left: -7px;
bottom: -10px;
border-radius: 3px;
/* hardcoded code, must be transparent */
border: 2px solid currentColor;
cursor:pointer;
-webkit-clip-path: polygon(0 0, 5% 0, 5% 88%, 100% 88%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 5% 0, 5% 70%, 100% 70%, 100% 100%, 0 100%);
}
<button type="submit" class="btn-base">
Button example
</button>
You can imitate borders using box-shadow to create a multi-border look.
Example:
button {
border: 0;
background: #666;
box-shadow: -8px 8px 0 -4px #FFF,
-8px 8px 0 0px #666;
}
<button>Sample</button>
I have the input search field. When I click on it I need it to become wider performing smooth transition from right to left, i.e. the input is located on the right side of the page and when I click on it it should stretch to the left in some number of pixels and become wider.
Here's my css:
#header #search input {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;
Could you help me with implementing that?
input[type="search"] {
background: #FFF;
padding: .5rem 1rem;
position: relative;
top: 0;
left: 0;
width: 178px;
height: 40px;
outline: none;
border: 1px solid #CCCCCC;
border-radius: 6px;
transition: all .5s;
}
input[type="search"]:focus {
width: 300px;
top: 0;
right: 100%;
}
<div style="text-align:right;">
<input type="search" id="search" />
</div>
Position the input absolutely and set the right property to zero:
position:absolute;
right:0;
That forces the expansion to the left when focused.
jsFiddle example
Make your containers offset parents using position: relative.
#header, #search {
width: 100%;
position: relative;
}
Then position your input using position: absolute and place it using right.
#header #search input {
position: absolute;
right: 0px;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;
Your animation will now stretch to the left.
I have created a button with border-bottom of 4px. While hovering the button , I'm reducing the border-bottom-width as 0px and adding top of 4px to avoid affecting other elements below the button.
But the items below the button are moving while i'm hovering the button. Because, the blocks after the button are not considering the 4px top. So, It not looks good. How to overcome this problem..
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
}
.btn:hover{
border-bottom-width: 0px;
top: 4px;
}
I have updated my code in jsFiddle
Thanks in advance..
Use this css:
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: block;
float: left;
box-sizing: border-box;
transition: all 0.2s linear;
margin-right: 100%;
}
.btn:hover{
margin-top: 4px;
border-bottom-width: 0px;
}
Here is a working fiddle:
http://jsfiddle.net/Hive7/5mhGt/2/
If you want to keep the border color and keep the text from jittering while animating the :hover state, try wrapping your button(s) in a relatively positioned container.
Then, update your css:
.btn-wrapper {
position: relative;
height: 100px;
}
.btn{
position: absolute;
top: 8px;
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: inline-block;
transition: 0.2s;
}
.btn:hover{
top: 12px;
border: 0px;
}
jsfiddle: http://jsfiddle.net/BpL2A/
Updated fiddle: http://jsfiddle.net/5mhGt/5/.
The easiest way to resolve your problem is to make the border transparent:
.btn:hover {
border-bottom-color: transparent;
}
You don't have to mess with another properties like margin-bottom or so. If you decide to change the border width in the future you won't have to have this margin always in mind.