CSS - Shadow behind letter - css

I want to make a text effect with shadow behind letter, like this:
This is my code:
span {
font-family: Calibri;
font-size: 110pt;
text-shadow: -14pt 18pt 4pt rgba(0,0,0,0.5);
}
<span>Text</span>
but this it simple text shadow, I need to transform it. How can I create this effect using CSS and only one HTML tag like <span>?
Thanks for help.

You can do this using a psuedo element instead of a shadow:
[data-shadowtext] {
position: relative;
font-size: 150px;
}
[data-shadowtext]::before,
[data-shadowtext]::after {
content: attr(data-shadowtext);
}
[data-shadowtext]::before {
position: absolute;
z-index: 0;
top: -60px;
left: 3px;
font-size: 1.2em;
/* the text is 20% larger than the parent */
color: transparent;
/* hide the text */
text-shadow: 0 0 25px black;
/* create a shadow only from the blur */
transform-origin: bottom;
transform: rotateX(75deg) skew(15deg);
letter-spacing: -15px;
}
[data-shadowtext]::after {
position: relative;
z-index: 1;
}
body {
margin: 20px 0 0 80px;
}
<div data-shadowtext="Text"></div>

This is not possible with writing core CSS.
You can only use as generated by Text Shadow.

You can use translate method and its matrix property.:
My JS Fiddle Example : https://jsfiddle.net/gsmjjm7b/
HTML:
<div id="relative">
<h1 id="title">TEXT</h1>
<h1 class="shadow">TEXT</h1>
</div>
CSS :
#relative{position:relative;margin:100px}
h1 {font-size:80px;margin:0}
h1.shadow {
position:absolute;
top:0;
left:-25px;
-ms-transform: matrix(1, 0, 0.7, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.7, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0.7, 1, 0, 0);
text-shadow:2px 2px 4px rgba(0,0,0,0.6);
opacity:1;color:rgba(0,0,0,0)
}

Another way of displaying,
span {
color: black;
position: relative;
font-family: Calibri;
font-size: 110pt;
}
span:before {
bottom: 2px;
color: rgba(0, 0, 0, 0.1);
content: attr(title);
left: 9px;
position: absolute;
text-shadow: 0 0 20px grey;
transform-origin: bottom;
transform: skew(30deg) scale(0.8, 1);
z-index: -1;
}
<span title="Text">Text</span>

It's not exactly the same but you can get the idea !!
span {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
padding: 20px;
border: none;
font: normal 100px/1 "Oswald", Helvetica, sans-serif;
color: #e74c3c;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
letter-spacing: 15px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}
span:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: -1;
position: absolute;
content: "Text";
top: 34px;
left: 28px;
padding: 20px;
border: none;
font: normal 77px/1 "Oswald", Helvetica, sans-serif;
color: rgba(255,255,255,0.2);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
letter-spacing: 23px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
-webkit-transform: rotateX(50deg) skewX(-30deg);
transform: rotateX(50deg) skewX(-30deg);
}
<span title="Text">Text</span>

Related

how to use data-* for tooltip for ellipses element

I have a span which contains ellipses and i want to show the content through tooltip, but the position of the tooltip isn't seem to adjust as i can't apply position relative to the parent (due to ellipses). Here's the code i've tried
.data-tooltip:hover:before{
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 82%;
left: 25%;
-webkit-transform: translate(-58%, 41.5%);
transform: translate(-58%, 51.5%);
}
.data-tooltip:hover:after{
content: attr(data-title);
padding: 6px 8px;
color: #fff;
text-align: left;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
min-height: 32px;
word-wrap: break-word;
position: absolute;
top: unset;
bottom: 75%;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
<span class="data-tooltip" data-tooltip="my tooltip">
ellipsed content
</span>
Here i am using 'before' for tooltip arrow and 'after' for tooltip content, but their positions doesn't seem to adjust either.
i have tried positioning my data-tooltip content relative, but due to overflow:hidden, the tooltip cuts outside the box.
An example below...
This code quoted from Chris Bracco. Please look at this article for detail.
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<p style="margin-top:50px">
<span data-tooltip="I’m the tooltip text.">I’m a span with a tooltip.</span>
</p>
Instead of
data-tooltip="my tooltip"
Your data-tooltip attribute should be data-title
That should work now.

HTML5 / CSS input field with image as submit-button inside the input field

I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>
It should look like this:
There were quite a few errors in the code you pasted up above which weren't doing you any favors.
You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.
Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...
#Search {
position: relative;
display: inline-block;
}
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
/* 40px padding to account for submit */
padding: 2px 40px 2px 10px;
}
input[type=submit] {
position:absolute;
width: 30px;
height: 100%;
top: 0px;
right: 0px;
border: none;
color: white;
background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
display: block;
cursor: pointer;
}
Working codepen here.
Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.
Hope this helps.
Here it is done with HTML and CSS.
/*Clearing Floats*/
.cf:before, .cf:after{
content: "";
display: table;
}
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* Left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
tried both variants, both variants will work, second solution comes clothest

CSS: round buttons with shadow effect

I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>

Checkbox not aligned with text

Hello does anyone know why my left green checkbox is not aligned on left of the text ? Here is my code and what I see right now.
I want something like this "V Etendre le linge X" for one row (V is the checkbox and X is the destroy button)
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eaeaea url('../bower_components/todomvc-common/bg.png');
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id = "todoapp">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.0.3/angular.min.js"></script>
</body>
</html>
You have position:absolute on your checkbox. Removing it fixes the issue.
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
height: auto;
/* position: absolute; */
/* top: 0; */
/* bottom: 0; */
margin: auto 0;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}

Text wont align on horizontal and vertical centers

I am trying to work on the following example for a user profile.
I have a problem with the text on my various fields though. I would like them to be centered horizontally and vertically.
Using
vertical-align: middle;
Did not work for me, or I did something wrong.
How can I make it so each text snippet is perfectly centered on its respective container?
Here's the solution:
/* --------------------------------
Primary style
-------------------------------- */
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
html,
body {
background: #f1f1f1;
font-family: 'Roboto', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
font-size: 200%;
}
.user-data {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
cursor: pointer;
display: table;
width: 100%;
height: 85px;
background: white;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 20px;
border-radius: 8px;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.response-layer {
vertical-align: middle;
display: table-cell;
text-align: center;
font-size: 200%;
color: #a8a8a8;
}
#user-action-text {
color: #f1f1f1;
font-size: 400%;
}
#user-name {
border: 0;
outline: 0;
padding: 0;
margin: 0px;
margin-top: 10px;
width: 304px;
height: 55px;
color: white;
}
#user-action {
background: #e74c3c;
height: 134px;
}
#user-position {
height: 74px;
}
#user-uuid {
height: 54px;
}
section {
max-width: 650px;
text-align: center;
margin: 20px auto;
}
section img {
border: 0;
outline: 0;
padding: 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 1em;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
resize: none;
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
.user-data:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
section img:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
#-webkit-keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#media (max-width: 690px) {
.half {
width: 304px;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.activity-detail:before,
.activity-detail:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.activity-detail:after {
clear: both;
}
<h1>New Activity Details</h1>
<section class="activity-detail">
<div class="half right" id="image-data">
<img src="img/default-avatar.png" alt="Profile Photo" style="width:304px;height:304px;" id="profile-photo">
<a class="user-data" id="user-name">
<div class="response-layer">Green Leaf</div>
</a>
</div>
<div class="half left" id="general-data">
<a class="user-data" id="user-action">
<div class="response-layer" id="user-action-text">Greetings</div>
</a>
<a class="user-data" id="user-position">
<div class="response-layer">Developer</div>
</a>
<a class="user-data" id="user-uuid">
<div class="response-layer">324124535345</div>
</a>
</div>
</section>
On the parent div .user-data I changed display to table.
On the child div .response-layer (the one containing "Greetings") I changed the display to table-cell. Now the vertical align works.
Here's the link to the codepen: Codepen
Replacing
vertical-align: middle;
with
position: relative;
top: 25%;
does the trick.
Edit: The answer above is much cleaner

Resources