We Keep Coding

half circle text on the edges [duplicate]

I have 2 DIV's as shown below and I've been trying to get the text between the two circles to wrap around the inner circle as shown on the attacthed image. I have not been able to achieve the desired result.
HTML
<div id="outer-circle">
This is just a test logo name
<div id="inner-circle">
</div><!-- End Inner Circle -->
</div><!-- End Outer Circle -->
CSS
* {
margin: 0 auto;
}
#inner-circle {
width: 200px;
height: 200px;
border-radius: 100%;
background-color: green;
margin-top: 28px;
position: relative;
}
#outer-circle {
width: 300px;
height: 300px;
border-radius: 100%;
background-color: blue;
margin-top: 50px;
text-align center;
text-align: left;
}
Click here to see current but undesired result
Example of desired result

See this post by Chris Coyier in which he separates each character of text into <span>s and rotates each one in turn using CSS rotation:
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
...etc
Or use Dirk Weber's csswarp.js Service which pretty much does the same but uses javascript to generate the html and css for you. (csswarp.js on GitHub)
Or use SVG text on a path as in this example from useragentman.com
<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1"
fill="none" stroke="black" stroke-width="1"
d="M 212,65
C 276,81 292,91 305,103 361,155
363,245 311,302 300,314 286,324
271,332 248,343 227,347 202,347
190,346 174,343 163,339 143,333">
</path>
</defs>
<text id="myText">
<textPath xlink:href="#path1" >
<tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
</textPath>
</text>
</svg>
Or...
Use an image.

Use base info from https://css-tricks.com/set-text-on-a-circle/
BUT with a simplifications and without any additional libs.
And it will work with any text you type...
var lettering = function(node,text){
var str = typeof text=='undefined'
?node.textContent
:text;
node.innerHTML='';
var openTag = '<span>';
var closeTag = '</span>';
var newHTML = openTag;
var closeTags = closeTag;
for(var i=0,iCount=str.length;i<iCount;i++){
newHTML+=str[i]+openTag;
closeTags+=closeTag;
}
node.innerHTML = newHTML+closeTags;
}
lettering(
document.getElementById('text'),
Math.round(Math.random()*1000) + ' : Hello world!!!'
);
.badge {
position: relative;
width: 400px;
border-radius: 50%;
transform: rotate(-50deg);
}
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
transform: rotate(10deg);
}
<div class='badge'>
<h1 id="text">Any custom text you type...</h1>
</div>

Wrap dynamic text around a spinning cylinder with CSS/Javascript (splitting.js)

I am fairly new to coding and don't have the in-depth knowledge to solve this problem on my own. I would be really grateful if somebody could help me out!
I am trying to wrap a dynamically loaded text without a fixed number of characters around a spinning cylinder using CSS and splitting.js. I tried following this tutorial and everything worked great until I started changing the text. The problem is that this method only works with text that doesn't change in length because it either gets cut off if the text is too long or a gap in the cylinder results if it is too short.
Here is the source code I have right now. Sadly it doesn't work properly when I paste it in jsfiddle. It does however work just fine in my code editor and is the same as in the tutorial I linked above.
<div class="circle" data-splitting>
Circle-Text-Animation-Effect-Cool-great
</div>
<script>
Splitting();
</script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:aqua;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: red;
color: blue;
font-size: 4em;
padding: 5px 12px;
border: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 10deg)) translateZ(250px);
}
Is there any workaround for this problem? Maybe even without using splitting.js?
I hope I could describe my problem properly. English isn't my first language and I can't upload images to Stackoverflow yet so I wasn't able to describe the problem visually!
Thank you in advance for your help!
enter image description here

The trick here is to note that the number of degrees you need to rotate a character depends on the total number of characters in the string.
I don't have the splitter.js library so have put in a bit of JS which does the same thing - separates each character into its own div with a style that defines a CSS variable - the index of the character.
The JS also sets a new CSS variable, --numchs, which is used in the CSS to calculate the number of degrees to rotate each character, --deg. This is then used instead of the 10deg to decide where to place a character.
const circle = document.querySelector('.circle');
const text = circle.innerHTML;// Note I am being lazy here and assuming the string has no unwanted whitespace
circle.innerHTML = '';
circle.style.setProperty('--numchs', text.length);
for ( let i = 0; i < text.length; i++ ) {
circle.innerHTML = circle.innerHTML + '<div class="char" style="--char-index: ' + i + ';">' + text.charAt(i) + '</div>';
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:aqua;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
--deg: calc(360deg / var(--numchs));
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: red;
color: blue;
font-size: 4em;
padding: 5px 12px;
border: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * var(--deg))) translateZ(250px);
}
<div class="circle" data-splitting>Circle-Text-Animation-Effect-Cool-great</div>

How to view/hide div only in that id

I am trying to make a div where it is assigned by an id.
My goal is to make that div have two sides: the front and the back (assigned by class)
* the front is shown as default, while the back will only be shown upon user click
My question is, when trying to make a lot of this div, how can I achieve this kind of scenario, where it will only show/hide those classes only in that particular id?
<div id="user01" onclick="userId(this)">
<div class="front">
<img src="../media/media/alumni/sdc/01.jpg"> User name on front
</div>
<div class="back">
other info on back
</div>
</div>
**user01 is assigned per each user (ex.: the first user is 01, while the second is 02, and so on...)
thanks :)

Use a css class on top of your id:
<div id="user01" class="user">
Then, in your Javascript, use document.querySelectorAll along with that class:
let users = document.querySelectorAll('.user')
Now you can iterate over this DOM node collection that is returned by document.querySelectorAll and add an event listener to each one:
Array.prototype.forEach.call(users, function(user) {
user.addEventListener('click', function(event) {
/* your code to be executed on click
each user is available here as 'this' */
// example:
this.classList.toggle('active')
})
})
As mplungjan pointed out, Edge and IE don't support forEach on Node collections, so Array.prototype.forEach.call(users, function(user) ... comes in as a replacement for users.forEach(function(user) { ....
As a last step, add the CSS that flips your stuff:
.user .front {
transition: opacity .3s ease;
opacity: 1;
}
.user.active .front {
opacity: 0;
}
.user .back {
transition: opacity .3s ease;
opacity: 0;
}
.user.active .back {
opacity: 1;
}
let users = document.querySelectorAll('.user')
Array.prototype.forEach.call(users, function(user) {
user.addEventListener('click', function(event) {
/* your code to be executed on click
each user is available here as 'this' */
// example:
this.classList.toggle('active')
})
})
.user {
display: inline-block;
height: 200px;
width: 200px;
position: relative; /* this allows absolute position of children */
}
.user:hover {
cursor: pointer;
}
.user .front,
.user .back {
transition: opacity .3s ease;
color: white;
position: absolute; /* position both "sides" on top of each other */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.user .front img,
.user .back img {
position: absolute;
z-index: 0;
}
.user .front span,
.user .back span {
background-color: rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
border-radius: 10px;
display: block;
left: 50%;
padding: 10px 5px;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.front {
opacity: 1;
}
.user.active .front {
opacity: 0;
}
.back {
background-color: #333;
opacity: 0;
}
.user.active .back {
opacity: 1;
}
<div class="user" id="user01">
<div class="front">
<img src="https://lorempixel.com/output/business-q-c-200-200-8.jpg"><span>User 1 name on front</span>
</div>
<div class="back">
other info on back for User 1
</div>
</div>
<div class="user" id="user02">
<div class="front">
<img src="https://lorempixel.com/output/business-q-c-200-200-2.jpg"><span>User 2 name on front</span>
</div>
<div class="back">
other info on back for User 2
</div>
</div>

automatic cookie bar pure css works fine but need delay

I added this pure css cookie bar to my website and all works fine, the only problem is that when you enter in the site, you can see FIRST the cookie bar, AND the cookie bar go up and go down at the end.
How can see my cookie bar only go down when i enter in my site, i thought to change de thenimation delay, add set time out .... but nothing change !!
here is the original codepen and you can see what i want to change in it
www.codepen.io/natewiley/pen/uGtcD
HERE IS MY CODE
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">
<div class="message">
This website uses cookies to give you an incredible experience. By using
this website you agree to the
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a>
</div>
</div>
<div class="mobile">
This website uses cookies,
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()">
learn more
</a>
</div>
</div>
<label for="checkbox-cb" class="close-cb">X</label>
</div>
</div>
HERE IS MY CSS
.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }
.mobile { display: none; }
#keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } }
.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }
.close-cb:hover { color:#fff;; }
.checkbox-cb { display: none;}
#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }

Removing the line in css
animation-delay: .8s;
will give you the result
Make the animation last longer.
animation: slideIn 4s;
Plus add some trick to animation flow:
0% {
transform: translateY(-50px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}

Color to grayscale on hover not working in IE11

I'm using Gray for a few elements on the site. However, I can't get it to work in IE11. For example, in the fiddle below, I use JS to add the grayscale and grayscale-fade classes so that the image fades from color to grayscale on hover. How would I get this to work in IE11? The author says that the plugin needs to be initialized for IE11 (i.e. $('article.project img').gray();), but if I add that line, all of the images turn gray by default from the start. I just want this to work in IE11. Can someone show me how?
Fiddle: http://jsfiddle.net/61jcam54/
HTML
<div id="content">
<article class="project">
<img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
<div class="overlay" style="margin-left: -1px; width: 367px;">
<h3>Project Title</h3>
<a class="post-link expand" href="http://google.com">+</a>
</div>
</article>
</div>
CSS
article.project {
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
article.project img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
article.project .overlay {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.hover .overlay, .active .overlay, .hover-sticky .overlay {
opacity: 1;
}
article.project .overlay h3 {
color: #FFF;
font-size: 17px;
font-size: 1.7rem;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
line-height: 1.3;
margin-top: 3.3em;
padding: 0 1em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
article.project .overlay .expand {
border: 5px solid #FFF;
bottom: 0;
color: #FFF;
display: block;
font-size: 30px;
height: 60px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 2;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
/* GRAYSCALE */
.grayscale, .grayscale-sticky {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
-webkit-filter: grayscale(100%);
}
.grayscale.grayscale-fade {
-webkit-transition: -webkit-filter .2s;
}
.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced {
filter: none;
-webkit-filter: none;
}
.grayscale.grayscale-replaced > svg {
opacity: 1;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
opacity: 0;
}
JS
$('#content').on('mouseenter', 'article.project', function(){
$(this).addClass('hover grayscale grayscale-fade');
$(this).find('.post-link').hide();
}).on('mouseleave', 'article.project', function(){
$(this).removeClass('hover grayscale grayscale-fade');
$(this).find('.post-link').show();
});

TL;DR
Here is an updated example that works in IE11 and all other supported browsers.
Exaplaination
There were a few issues...
According to the plugin that you are using, when the browser doesn't support CSS3 filters (like in IE10/11) the following applies:
...the plugin uses Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.
Since the img element needs to be replaced with an SVG element in IE11, the plugin script (with Modernizr shiv) is required in order for it to work. In the jsFiddle example you provided, the script jquery.gray.min.js actually wasn't even being executed in IE11 since it was blocked due to mismatched mime types (this warning was in the console).
To work around this, I just copy/pasted the script into the example. In addition, it's worth noting that the Modernizr docs state that the script must execute before the <body> loads. This seems to be relevant in IE when using a HTML5 Shiv:
The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.
Now that the script is actually being executed in IE11, the plugin needs to be initialized and the img element needs to be replaced with an SVG. According to the plugin, the img elements will automatically be replaced if the element has the class .grayscale. Alternatively, it also looks like you can use the custom .gray() method, too. Since your example wasn't actually giving the class .grayscale to the img element, it wouldn't have being initialized in IE11.
Below, you will notice that I added the class .grayscale to the img element (in order to initialize it in IE11). In addition, the class .grayscale-off is also added to the element in order for the gray effect to be off initially. In the updated jQuery, you will see that this class is just toggled.
Here is the relevant updated HTML/CSS/jQuery:
Updated Example Here
I also shortened the jQuery a little too:
$('#content').on('mouseenter mouseleave', 'article.project', function (e){
$('.grayscale', this).toggleClass('hover grayscale-off');
$(this).find('.post-link').toggle();
});
.grayscale.grayscale-replaced > svg {
opacity: 0;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg {
opacity: 1;
}
<div id="content">
<article class="project">
<img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" />
<div class="overlay">
<h3>Project Title</h3>
<a class="post-link expand" href="...">+</a>
</div>
</article>
</div>

IE prefers SVG to add filters on images.
Here is a way to achieve this on IE10, Firefox and Chrome: http://jsfiddle.net/azx3mxmt/3/
Pictures are added programmatically like this:
var container = document.getElementById("container");
var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
for (var i=200 ; i < 2200 ; i += 100) {
container.appendChild(animation(src, i));
}
SVG filters are set like this:
<svg width="128" height="128" viewBox="0 0 128 128">
<defs>
<filter id="filter" >
<feColorMatrix id="gray" type="saturate" values="0.5"/>
<filter/>
</defs>
<image x="0" y="0" width="128" height="128"
filter="url(#filter)"
xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/>
</svg>
Other effects can be achieved with SVG. Look at this web site.