Develop Reference

Create a convex country flag with glossy effect wrapping an uneven rounded border div using CSS or JS

I'm trying to create a World Cup 2018 page using the design that was used in the world cup 2018 qualification european zone (using the image that i've attached).
Please correct me if i'm wrong for some of these points:
In the EUROPEAN ZONE title, i can achieve this with a trapezoid rounded border.
For the title banner, it is using an uneven border div. This will have the same div alongside with the country names. I've tried using border-radius with the / operator maybe there is a better solution (if there is).
And also if you can see there is a small lens flare (not sure if that is the correct term) on top of the div.
For all the banner div i can put some gradient background color to make it look it has a 3D effect and add some glossy effect.
For the dark transparent background i can do it the same with border-radius. maybe with some concave border using the :after selector.
This part is where i'm stuck: I'm not sure how to recreate the country flags that has a convex shape but it looks like wrapping the div (maybe add a box-shadow effect) and add a glossy effect.
I'm assuming I can achieve this with CSS only, or maybe a little bit of Javascript. But no jQuery because I'm planning to create this in react.
Here's what I've got so far:
body {
background: white;
}
#wrapper {
border: 1px solid black;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
display: flex;
height: 40px;
align-items: center;
}
#flag {
width: 70px;
height: 100%;
background: red;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
margin: 0 20px;
}
#flag:after {
content: '';
background: white;
position: relative;
height: 100%;
width: 30px;
display: block;
left: 44px;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
}
<div id="wrapper">
<div id="flag"></div>
<div id="team">Country Name</div>
</div>
View on JSFiddle

Problems with position:fixed and responsive / adaptive Layout

First look at this website: http://irismediainfo2.lili.de/spip.php?article4924
On my screen it looks like on this screenshot: chrome - full window - desktop resolution: 1440x900
I think for most of you it will look diferent but thats part of the problem...
The main div with the gray border is inside an other div with id="page".
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative;
}
I created a new div with id="toolbar", that looks like it sticks to this #page-div, but it does not scroll with the page. On the website I linked above u can see the #toolbar as a dummy-box (grey with some Text).
At the moment the I use position:fixed in #toolbar.
When I position it at the side of #page so that it LOOKS like it is attached to it, and I resize the browser window... the two divs dont move the same way because the position of #page is calculated from the middle (by margin:auto) and the position of #toolbar is calculated from the side of the browser window (by position:fixed). So it is not attatched anymore in any other windowsizes.
I tried to make the #page float, to make the #toolbar appear at the side but that destroys the "margin:auto" of the #page so it is not centered anymore.
I also tried
#toolbar {
position: fixed;
center: 0px; }
Because I hoped there could be a way to calculate the position for position:fixed from the center.
Nothing worked, I hope you know a solution.
Actually everything I want is something like:
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative; }
#toolbar {
position: fixed;
center: 0px 280px 0px 0px; }
I would like to do this with minimal code and resources because I don't want to make the loading speed worse because of a little toolbar.
If you need more specific code from my css or html please tell me.
I hope the target and the problem is clear.

All you need is a wrapper-div that centers the whole block and algin the toolbar after that, since your #page has a fixed width in every viewport.
HTML:
<div class="wrapper">
<div id="toolbar">
content
</div>
</div>
CSS:
#toolbar {
height: auto;
padding: 10px 20px 10px 15px;
background-color: rgba(170, 170, 170, 0.5);
border: 1px solid #AAA;
border-radius: 0px 5px 5px 0px;
text-align: center;
margin: 0px auto 0px 279px;
}
.wrapper {
position: fixed;
top: 30%;
left: 50%;
}

Getting a <div> and <a> to be the same height side by side

So I am trying to add a custom style to the select2 jquery plug, it is a tag like multi selector plugin. The way that select2 renders selected "tags" guides my css rules to try and style. select2 renders a <div> containing the selected tag text followed by an <a> to remove that selected tag if the user desires.
I want the close btn and the tag text to look like one block. I have it almost where I want but you can see that the <a> element and the div element vary in height by a pixel or two. I thought maybe this was a display:inline versus display:block issue but I have tried setting both the elements to display:inline-block with no luck, here is a jsfiddle, just select both option1 and option2 to see my issue:
http://jsfiddle.net/QRNqm/
And here is my code, remember I am using the select2 plugin also:
$(function(){
$('#mdlTags').select2();
});
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
}
.select2-choices li div {
border-radius: 2px 2px 2px 2px;
color: #fff !important;
text-decoration: none;
padding: 3px 14px 3px 12px;
background-color: #bdc6e5;
}
<select multiple="multiple" id="mdlTags" class="skipMsDropdown" style="width:330px;">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>

Replace .select2-search-choice-close class with below:
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
height: 14px; /* given height (actual 13px and 1px to adjust bottom margins) to adjust line-height of parent element */
margin-top: -1px; /* to adjust top margins to get in proper line */
}
Here is a working DEMO.

It's now on the same level. Here is the edited css.
.select2-search-choice-close {
background: url("/images/projects/closeWhite.png") no-repeat scroll 5px center #BDC6E5;
border-radius: 2px;
padding: 3px 14px 3px 0; // increase the top padding for 1 point.
}
.select2-search-choice-close {
background: url("select2.png") no-repeat scroll right top rgba(0, 0, 0, 0);
display: block;
font-size: 1px;
height: 13px;
outline: medium none;
position: absolute;
right: 3px; // Reduce the top position for 1 point
top: 3px;
width: 12px;
}

First off, you have one less pixel of top padding on the select2-search-choice-close style. But even once you fix that, there will still be a pixel of difference between the two elements.
If you take a look at the demo on the Select2 page, that's the way it appears there as well (with one vertical pixel difference between the two elements). The difference is that they are applying the unifying style on the container that holds these two elements, rather than styling each of these elements separately.
If you make these two changes, you end up with something like this:
http://jsfiddle.net/Cv6cH/

CSS Inner Border?

I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.
Now, is there a way to add the inner border, as in the first button, to the other three using CSS?
Fiddle here.

According to the box model, padding is between the content and border. You should be able to style the images like:
.img-btn {
background: #FFF; // inner border color
padding: 2px; // inner border width
border: 2px solid #[yourgreen]; // outer border
}
You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:
.img-btn {
background: #FFF url('your.img') no-repeat;
padding: 2px;
border: 2px solid #[yourgreen];
width: [image width];
height: [image height];
background-position: center center;
}
Here's a DEMO of double-border as described above.

You don't need two <divs> and an <a> to do the button. You can do it with a single <a>. For both the images and the button you can use box-shadow to do the outer border. Center the background-images in the <img> elements.
Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/
Output:
HTML:
<a id="add" href="#">Add To Cart</a>
<img id="facebook" class="icon" />
<img id="twitter" class="icon" />
<img id="email" class="icon" />
CSS:
#add {
background-color: #9bc9c7;
border: 1px solid white;
box-shadow: 0 0 0 2px #9bc9c7;
color: white;
display: inline-block;
font: normal 13px/25px Helvetica, Arial, Sans Serif;
height: 25px;
margin-right: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
vertical-align: top;
}
#add:hover {
background-color: #eabeb2;
box-shadow: 0 0 0 2px #eabeb2;
}
.icon {
background-color: rgb( 155, 201, 199 );
border: 1px solid white;
box-shadow: 0 0 0 2px rgb( 155, 201, 199 );
height: 25px;
margin-right: 3px;
width: 25px;
}

Use the same approach as you did for the button - just treat the icons as background images to the inner div. So you should have a div with some padding, an inner div(in your case img) with a white border, and a background image (the icons.)

Assuming you can't modify the icon images directly, just wrap them in a div in the same way as "Add to Cart". You'll also need to use either
background-position: center center;
to ensure that the icon stays centered within the smaller img, and/or
background-size: 24px 24px;
to scale the background down a bit so the white border doesn't run into the symbols.

a box with a *pointer* with just CSS?

How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)

Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}

There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.

The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.

Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.

The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.