Develop Reference

Artefacts appearing on website: CSS issue

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);
}

running away button keeps leaving browser window

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">

creating a corner button div

I am looking to make a triangle button in the top-right of my website (fixed position). It's just a icon over top of a background colour with hover effect. I was wondering if there is a way to get a angled div or if it needs to be a background image?
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
HTML
...
<div id="top-btn">icon</div>
EDIT - visual representation. positioned top right of window

Updated for triangle on right with rotated text
Use the border trick to create a triangle in CSS: DEMO
HTML:
<div id="corner-triangle">
<div class="corner-triangle-text"><span class="corner-triangle-firstline">Free</span><br>Shipping!</div>
</div>
CSS - note comments for adjusting triangle size and color; also, remove transform: rotate(45) lines if you don't want the text rotated:
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0 200px 200px 0; /* adjust for size of triangle */
border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
position: fixed;
top: 0;
right: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
-webkit-filter: drop-shadow(0 1px 9px #000000);
filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
position: relative;
font-size: 2.1em;
top: 0;
right: -90px;
font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
font-weight: 200;
line-height: 1.1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
text-decoration: none;
}

Basically, you create an element with width and height of zero, and use borders to create the triangles.
[]
This article shares some code.
https://css-tricks.com/snippets/css/css-triangle/
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

.triangle {
border-width: 50px;
border-style: solid;
border-color: red red transparent transparent;
position: fixed;
top:0;
right:0;
width:0;
height:0;
}
Working fiddle.

If you're asking how to make a triangle without using an image, there's these html characters: ▲ ▲ and ▼ ▼
You can also make triangles in css by making an element with a width and height of zero, and giving it a border on only 3 sides, with 2 sides being transparent.
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
More detail here
https://css-tricks.com/snippets/css/css-triangle/

This is what I came up with:
.corner{
width: 0;
height: 0;
border-top: 50px solid rgb(227, 37, 37);
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right:50px solid rgb(227, 37, 37);
float:right;
}
.corner:hover{
border-color: #A00404 #A00404 transparent transparent;
transition: border-color 1s;
}
Here is the JSfiddle demo

Depending on what you need to do with it, the easy way would be to use a character like the following: ▴
You cannot just copy and paste it though. Use the following in your code to display this character:
▴
It may not suit every situation, but I've used it. It's as easy to place as any other text, and you can easily resize it, apply colour, background, or shadow to it, because it's just text.
Here's a list of all the characters you can use, depending of course on the font you're using, which will be a limitation of this method I think:
http://dev.w3.org/html5/html-author/charref
Another limitation would be if you want to place text or an icon on top of it. I'm sure it's possible, but there are better methods if that's your intention.

Open CSS3 / HTML5 modal dialog relative to mouse position

I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.

One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!

simplest way to create email signup form that stays on top right of screen?

what is the simplest way to create a thin email signup bar at the top of the browser, that stays there as the user scrolls down and navigates to different pages?
i'm using wordpress and I already have jquery loaded, but haven't programmed anything using jquery or wordpress yet.
i've been mostly a user up to now and know html, css and some php and javascript.
thanks
B

Just create a container div for the signup button and add it wherever you would like the button to appear (your page.php, single.php, index.php) or header.php to have it everywhere as another poster suggested. Here is a basic demo and some code that you can use:
HTML
<div class="signup">
<a class="signupbtn" href="#" title="Sign up">Sign Up</a>
</div>
CSS
.signup {
position:fixed;
left:0;
top:160px;
}
a.signupbtn {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-right: 10px;
}
a.signupbtn:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.signupbtn:active {
color: #000;
border-color: #444;
}
And here's a basic demo of the button in use:
http://jsfiddle.net/andresilich/FAVK9/1/

Basically when you want something to stick to a special place even when browser scrolls, you should use fixed positioning.
I strongly suggest you read this article (from A List Apart), to grasp what CSS Positioning means.

You can put the div as in the example in HTML code on every page (I don't know how it looks in Wordpress, but there must be some header php file that is loaded on every page).
CSS:
div#signup{
position:fixed;
top:0;
right:0;
width:100px;
min-height:30px;
background-color:red;
text-align:center;
}
HTML:
<div id="signup">
Sign up
</div>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
Edit: I changed code a bit after the comment + added live demo (it interferes a bit with JSFiddle because their objects are also top-right aligned).