Develop Reference

Activate multiple Animations via an <a> button

I'm programming a website where when you go down to "Partners & Sponsors" you get to a menu which you can open by clicking an Image of an Arrow (anchor element), when I click it I want the company logos to flare up a bit (like get a bit bigger for 1s and then go back to default) after pressing the button, also I need the animations to play one after another for like 4 Logos.
so basically I want some images to change their size after a button is pressed and after like 1s I want them to get back to their default size. Below are some code snippets, also I have absolutely no clue about java script so something with only CSS and html would be perfect, thanks in advance.
html:
<div class="pfeilbox"></div>
<a class="DingsFürZertifkateKnopf">
<script>
$("#1").click(function() {
$('EsetLogoUnten').toggleClass('EsetLogoUntenANIMATION');
});// doesnt work
</script>
<img id="1" src="images/pfeilfertch.png" style="position: relative; left:500px; top:-25px; width: 50px; z-index: 64; ">
</a>
<div class="DingsFürZertifkateInhalt">
<div class="dasdingbestimmtdiegrößevondemweißendinglol"></div>
<div class="EsetLogoFürUnten">
<div class="EsetLogoFürUntenText">
<p>text</p>
</div>
</div>
and here is my CSS:
.pfeilbox{
position: relative;
left: 470px;
top: 20px;
display: block;
background-color: rgb(255, 255, 255);
z-index: 42;
width: 150px;
height: 50px;
border: solid black;
border-width: 1px;
border-color: black;
}
.EsetLogoFürUnten{
position: relative;
width: 300px;
height: 123px;
top: -800px;
left: 0px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/Partnerlogo_Gold-small.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoUntenANIMATION{
position: relative;
width: 0px;
height: 123px;
top: -800px;
left: 10000px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/altaro_vm_backup.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoFürUntenText{
position: relative;
width: 300px;
height: 130px;
font-size: 1em;
top: 150px;
left: 0px;
z-index: 334;
display: block;
background-color: #ffffff;
border: solid black;
border-width: 1px;
border-color: black;
box-shadow: 5px 5px 2px rgba(47, 52, 57, 0.378);
}

Angular/SCSS/Javascript Customized Tooltips

I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}

Range Slider - Animate Output Number

I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});

CSS/jQuery - Is it possible to create this shape (something like inverted circle)

I have no idea how would i make something like inverted circle in the corners. I have attached picture for better understanding.
Is this even possible to create using CSS3 or perhaps jQuery?

How i would recommend create that shape SVG.
Css solution:
Using a before and after elements that matches the background.
.shape {
position: relative;
width: 400px;
height: 120px;
background-color: cornflowerblue;
text-align: center;
color: white;
line-height: 120px;
}
/*replace with "" if your going to use the code*/
.shape:before {
content: "↙";
font-size: 2.5em;
text-indent: 35%;
line-height: 0%;
position: absolute;
top: calc(100% - 20px);
left: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-right-radius: 15px;
}
.shape:after {
content: "↘";
line-height: 0%;
text-indent: -43%;
font-size: 2.5em;
position: absolute;
top: calc(100% - 20px);
right: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-left-radius: 15px;
}
.shape .extra {
position: absolute;
top: 100%;
background-color: cornflowerblue;
width: 30%;
height: 30%;
left: 35%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
<div class="shape">This is not a problem any more
<div class="extra"></div>
</div>
SVG:
Using the path element and then using the Bezier Curves command.
MDN paths
<svg width="300px" viewbox="0 0 100 60">
<path fill="cornflowerBlue" d="m 0,0
100,0
0,30
-25,0
c-5,0 -5,0 -5,5
v20
c0,5 0,5 -5,5
h-30
c-5,0 -5,0 -5,-5
v-20
c 0,-5 0,-5 -5,-5
h-25z" />
</svg>

The codepen link here (http://codepen.io/techsev/pen/dtAfB/) will teach you how to useadditional divs and shape them to create inverted corners. There is no way currently to invert rounded corners without attaching additional frameworks to a style sheet.
#import "compass/css3";
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello, use mult. divs inside a div to do this</h1>
<div class="bottom"> </div>
</div>
</div>

Box with Arrow top and Border

I'm just going to create a box on the
edge has an arrow. I have quite often tried but unfortunately relevant solution.
I naturally inquired on the Internet and on the website, but unfortunately without success.
So it should look after:
the arrow should have the same border like the box and the same backgroundcolor
So it looks now
.arrow-up {
width: 10px;
height: 10px;
margin-top: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid gray;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block;
margin-top: 54px;
float: left;
left: 29.965%;
z-index: 2;
border-radius: 3.5px;
}
FIDDLE
I'm sorry for my english

Here's updated fiddle: FIDDLE.
You can try with this CSS:
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2:after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #ccc;
border-width: 1px 0 0 1px;
width: 15px;
height: 15px;
top: -9px;
right: 19px;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
However, this includes transform property which is a new feature and might not work in every browser.
Other solutions are fine but they won't let you add border to this little triangle. You pick the one that suits you.
EDIT:
Yet another fiddle: http://jsfiddle.net/dAdry/22/.
I also figured out how to do this without transform. You put two triangles, one grey and one white a little bit smaller.
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2::before, #log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 0 10px 10px 10px;
right: 19px;
}
#log2::before {
border-color: #ccc transparent;
top: -10px;
right: 19px;
}
#log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #fff transparent;
border-width: 0 10px 10px 10px;
top: -9px;
}
Try it out and let me know if it suits you.

Create your triangle using :before
http://jsfiddle.net/dAdry/9/
#log2:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 7.5px 8px 7.5px;
border-color: transparent transparent white transparent;
position: absolute;
display:block;
top: -8px;
}

.arrow-up {
width: 0;
height: 0;
margin-top: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
fiddle

http://jsfiddle.net/dAdry/27/
This creates a border.
The CSS
.arrow-up {
width: 0px;
height: 0px;
margin:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
.arrow-inner {
width:0;
height:0;
margin:1px 0 0 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block ;
margin-top: 54px;
float: left;
left: 29.965%;
border-radius: 3.5px;
}
And the HTML...
<ul id="log2" style="display: inline;">
<span class="arrow-up" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;" ></span>
<span class="arrow-inner" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span>
<br/>How are u?<br/>Whats the matter? :D
</ul>