I've been stumped by this for a bit and would really appreciate some advice if possible. So here is the offending website in question: Imran Ahmed's Website
The issue that I'm having is with these buttons: In the example above, the 'Devpost' button shouldn't just appear by itself, it should also have another button 'Github' next to it (as shown in the image below).
Now, while the div for this is in the correct place, the button actually appears right at the top of the screen (as an artefact) here:
This is obviously not the correct functionality for the website. In terms of things I have tried, I have attempted to change the CSS of the corresponding div (link-effect) to use position: absolute instead of position: relative - while this fixed the artefact, it ruins the button animations (which isn't useful).
Now, one thing I've noticed is that this seems to appear on Chrome only after the slide in animation (part of the WOW package) has finished. If you scroll down to the My Projects section and refresh the page you'll notice the button only disappears when the animation completes (here's an example of the formatting working correctly during the middle of the animation):
This leads me to believe there is a change the animation complete function is making that is causing this bug - but unfortunately I can't pinpoint it down. I tried using the chrome animation tool to dive down on the changes but I'm a rookie with web development/debugging and I couldn't make much headway.
With this in mind, I would really appreciate any advice you may have on how to resolve these artefacts! In addition, it would be great if the error could be explained - because I'd like to know how to avoid it in the future! Thanks for everything!
I believe the relevant code in question is below but I'm not exactly sure if this is indeed where the problem lies!
.link-effect {
width: 100%;
height: 42px;
display: inline-block;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.link-effect a {
margin: 0 auto;
color: rgba(230, 126, 34, 1);
position: relative;
padding: 16px 7px;
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
.link-effect a::after,
.link-effect a::before {
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 0;
color: rgba(230, 126, 34, 0);
content: attr(data-text);
transition: max-height .3s, border-color 0s
}
.link-effect a:focus,
a:hover {
padding: 5px 7px;
border-color: rgba(230, 126, 34, 1);
outline: 0
}
.link-effect a::before {
top: 0;
border-left: 2px solid rgba(230, 126, 34, 0)
}
.link-effect a::after {
padding: 5px;
border-right: 2px solid rgba(230, 126, 34, 0)
}
Hope this helps :)
.link-effect {
width: 100%;
height: 42px; // remove this
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
display: flex; // add this
justify-content: center; // add this
}
.link-effect a {
margin: 0 5px; // change this
color: rgba(230, 126, 34, 1);
position: relative;
padding: 5px 7px; // change this
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
Related
I am new to web development and I have a bug that I cannot seem to fix. Basically, I have a button that highlights when its hovered and it works but there is a small outline of the original color when hovered. I'm pretty sure this is not because of an outline or a border. The bug is displayed in the picture provided. Here is the code:
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
EDIT: I'm using Google Chrome and Windows 11 (idk if OS is important)
The box shadow is slightly transparent around those corners, allowing you to see the beige background color underneath. Changing the background color of the button on hover to the same color as the box shadow fixes this. The effect is ever so slightly different, but I can't really tell just from looking at it.
Also, on chrome, this box shadow transition blinks. I messed around with it and changed the 4th number to 1px and it stopped blinking. I couldn't tell you why, but there you go.
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
overflow: hidden;
}
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
I just got why it's like that. It's cause of your "beige" background. When I change it to "red" look how it is
red background button
Fix: Let's give background when :hover state is used
So your code will be like
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
background: rgb(36,36,37);
}
Let me know how it is
The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!
Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git
With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.
I'm currently working on a project which could potentially have a large number of images on it at once. So the design we have puts a small caption on the bottom of the image, as an overlay, with a small ::After 'arrow' pointing into the following section.
The overlay is about 10% transparent, so some of the image is just visible, but depending on the image, the color of the overlay will vary - causing the arrow to mismatch.
Please see this image as an example:
Is there any way I can programmatically sample either one or an average of pixels near the 'arrow', so that it always gets the right color, and looks seamless?
Edit:
.overlay-with-arrow
{
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(62, 62, 62, 0.9);
color: #FFF;
text-align: center;
font-family: Montserrat, SansSerif, serif;
text-transform: uppercase;
}
.overlay-with-arrow::after
{
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(62, 62, 62);
display: block;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: -20px;
z-index: 1;
}
I have a problem. I am trying to program running away button, but it keeps leaving browser window. Is there any way how to set some limitations to random movement? I am trying to add this button to Adobe MUSE website... ANY IDEAS PLEASE? Thanks!
<input onclick="location.href='http://www.besyx.sk/PF2017/gratulujeme.html';"
value="CHCEM ZVÝŠIŤ ADRENALÍN"
style="transition: all 0.3s ease 0s;
background: rgb(48, 197, 255) none repeat scroll 0% 0%;
color: rgb(255, 255, 255);
height: 50px;
border: 1px solid rgb(0, 153, 179);
border-radius: 100px;
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;"
onmouseover="this.style.marginLeft=Math.random()*400+event.clientX/8+'px'; this.style.marginTop=Math.random()*400+event.clientY/8+'px';" type="button">
Before I get into this, I'm sure that there is an answer to my question. I am new to coding, so I don't understand how to plug in the information to make it work on my site. I am trying to get a portfolio like this site: http://gomedia.com/our-work/. Here is my site so you can see the code: http://www.mattsusla.graphics. I have tried for an hour with no success. Please Help!
It's best to do this with native css. Simply call the element's hover state with :hover
button { background: blue; }
button:hover { opacity: 0.5; }
<button>Change Opactiy on Hover</button>
Let's look at the code you'd need in JavaScript
var button = document.getElementById("my-button");
button.addEventListener("mouseover", function() {
button.style.opacity = 0.5;
});
button.addEventListener("mouesout", function() {
button.style.opacity = 1.0;
});
You dont need javascript for this.
Its simple done with css:
img:hover {
opacity: 0.5;
}
if you want it to be more smooth, you can add a transition. this is done with css, too. only use javascript if you really need it!
img {
opacity: 1;
}
img:hover {
opacity: 0.5;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
I am guessing that you are looking for the same functionality that is in the first site? If that is correct this will do it for you. See fiddle: https://jsfiddle.net/8sphkqkn/1/
html
<div id="box">
<div id="overlay">
<span id="text">Boss Dog Brewing Co.</span>
</div>
</div>
css
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
width: 300px;
height: 200px;
}
#box:hover #overlay {
opacity: 1;
}
#text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 16px;
}