Polymer 1.1
I am using paper-ripple which works. However, the ripple goes out side the element. In all the examples, this doesn't happen. I would really like to keep the ripple effect inside the element and not outside.
<dom-module id="portfolio-display">
<style>
:host {
#apply(--layout-horizontal);
#apply(--layout-center-justified);
height: 40%;
}
section {
width: 100%;
transition: box-shadow 0.1s ease-out;
background-color: #5a7785;
}
section:hover {
box-shadow: 0px 0px 30px 0 rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.24);
cursor: pointer;
}
#media all and (min-width: 1200px) {
section {
width: 90%;
}
}
iron-icon[icon="build"] {
color: rgba(255, 87, 34, 1);
}
.big {
--iron-icon-height: 200px;
--iron-icon-width: 200px;
}
</style>
<template>
<section>
<div onclick="page('/portfolio')"
class="vertical layout">
<div>
<div>
<h2 class="section-title">Portfolio</h2>
<p class="section-description">blah blah blah</p>
</div>
<div class="layout horizontal center-center">
<iron-icon class="big" icon="build"></iron-icon>
</div>
</div>
</div>
<paper-ripple></paper-ripple>
</section>
</template>
<script>
Polymer({
is: "portfolio-display"
});
</script>
</dom-module>
Try giving your section a relative position since the paper-ripple's position is set to absolute by default.
<section class="relative">
Related
This is the portion of my HTML: I want to have to the text fixed to an image and not disappear when I stop hovering on the text.
.overlay1 {
position: relative;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/*Test hover*/
.container1:hover .overlay1 {
opacity: 0.5;
}
<div class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<img src="sites/chau.ac.zm/themes/chau/images/AF.jpg" alt="Snow" class="image" style="width:100%">
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</a>
</div>
If I get you right, you want div.overlay1 to
be invisible initially
be visible on hover over div.container1
stay visible even if you hover out of div.container1
You cannot achieve 3. without using JavaScript.
I suggest this code:
/* You need this container to limit the .overlay1 position */
.img-container {
position: relative;
}
.overlay1 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/*Test hover - change :hover to class .visible */
.container1.visible .overlay1 {
opacity: 0.5;
}
<div id="container1" class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&h=150&q=80" alt="Snow" class="image" style="width:100%">
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</div>
</a>
</div>
<script>
// get element
var container1 = document.getElementById("container1");
// add hover event function
container1.addEventListener("mouseover", function() {
container1.className = "container1 visible";
});
</script>
See the solution if it works!
Just one question:
If you need a text to be fixed to an image, then why are you using hover?
.overlay1 {
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: auto;
transition: .5s ease;
opacity:1;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
right:-20px;
top:50%;
}
.row1{
position:relative;
width:500px; margin:0 auto;
}
<div class="container1">
<a href="/content/gallery">
<div class="columny">
<div class="row1">
<img src="https://image.shutterstock.com/image-photo/field-spring-flowers-sunlight-450w-377208970.jpg" alt="" />
<!-- <div class="overlay1"> -->
<div class="overlay1">Gallery</div>
<!-- </div> -->
</div>
</div>
</a>
</div>
remove class from gallery div
<div class="overlay1">Gallery</div> remove the class and use without any "overlay1"class
I want to create a business card through HTML and CSS. Following is the design:
Following is my code:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 50px 16px;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info>div:nth-child(2) {
text-align: right;
right: 0;
}
.number>div:nth-child(2) {
text-align: right;
right: 0;
}
<div class="card">
<div class="container">
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="number">
<div>R:5435437435</div>
<div>O:7438573478</div>
</div>
<div class="info">
<div>name#example.com</div>
<div>Address</div>
</div>
</div>
</div>
From the above code, I am not able to position the Phone Numbers, Email Address and Office Address in proper place where I want. No need of help for background images. I need help only for building the CSS part. Could anyone please help. Thanks in advance.
Everything is possible ;)
Give me a plus ;)
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 50px 16px;
position:relative;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info > div {
padding-top:10px;
text-align:center;
}
/*
.number > div {
display: inline-block;
margin-left:70%;
}
*/
.number > .number_container {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<div class="number">
<div class="number_container">
<div>R:5435437435</div>
<div>O:7438573478</div>
<div>name#example.com</div>
</div>
</div>
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="info">
<div>Address</div>
</div>
</div>
</div>
</body>
</html>
I don't know if this would help? I'm not a professional, correct if I'm wrong with this code.
BR
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 50px 16px;
position:relative;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info > div {
padding-top:10px;
text-align:center;
}
.number > div {
display: inline-block;
margin-left:70%;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<div class="number">
<div>R:5435437435</div>
<div>O:7438573478</div>
<div>name#example.com</div>
</div>
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="info">
<div>Address</div>
</div>
</div>
</div>
</body>
</html>
I want to create three divs that are small boxes that are colored respectively:
<div class="foo blue"></div>Blue
<div class="foo purple"></div>Purple
<div class="foo wine"></div>Wine
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}
This works for everything except I need the text next to each box to align to the right of its respective div. Everything should be in one row, with the text vertically aligned to its div. This just forces text outside the confines of the three divs. What's the appropriate way to wire it together?
jsfiddle: http://jsfiddle.net/vsfu72j8/1/
Replace the float:left to:
.foo {
display: inline-block;
vertical-align: middle;
}
here is the fiddle: jsfiddle
With flexbox, use inline-flex along with align-items: center;, but first you need to wrap your elements in another tag.
Code Snippet:
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul > li {
display: inline-flex;
align-items: center;
}
.foo {
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}
<ul>
<li>
<span class="foo blue"></span> Blue
</li>
<li>
<span class="foo purple"></span> Purple
</li>
<li>
<span class="foo wine"></span> Wine
</li>
</ul>
You can also improve this semantically, using an SVG <rect> to represent your squares. Using a spritesheet to reuse the same element.
Code Snippet:
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul > li {
display: inline-flex;
align-items: center;
}
.foo {
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
}
.blue {
color: #13b4ff;
}
.purple {
color: #ab3fdd;
}
.wine {
color: #ae163e;
}
.svg-spritesheet {
display: none;
}
<ul>
<li>
<svg class="foo blue">
<use xlink:href="#foo"></use>
</svg>
Blue
</li>
<li>
<svg class="foo purple">
<use xlink:href="#foo"></use>
</svg>
Purple
</li>
<li>
<svg class="foo wine">
<use xlink:href="#foo"></use>
</svg>
Wine
</li>
</ul>
<svg class="svg-spritesheet">
<symbol id="foo" viewBox="0 0 20 20">
<title>foo</title>
<rect width="20" height="20" fill="currentColor" stroke="#000" stroke-opacity="0.2" />
</symbol>
</svg>
You have to rearrange your HTML structure a little bit. I've used CSS Flexbox to achieve your requirements.
Please have a look at the below code or checkout this fiddle.
Learn more about CSS Flexbox
.item-holder {
display: flex;
}
.item {
display: flex;
align-items: center;
margin-right: 10px;
}
.item:last-child {
margin-right: 0;
}
.foo {
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}
<div class="item-holder">
<div class="item">
<div class="foo blue"></div>
<div class="text">Blue</div>
</div>
<div class="item">
<div class="foo purple"></div>
<div class="text">Purple</div>
</div>
<div class="item">
<div class="foo wine"></div>
<div class="text">Wine</div>
</div>
</div>
Hope this helps!
When you want your divs to behave like a table you can define so using CSS. I find it very intuitive and handful for some situations:
HTML:
<div class="table-row">
<div class="table-cell">
<div class="foo blue"></div>
</div>
<div class="table-cell">Blue</div>
<div class="table-cell">
<div class="foo purple"></div>
</div>
<div class="table-cell">Purple</div>
<div class="table-cell">
<div class="foo wine"></div>
</div>
<div class="table-cell">Wine</div>
</div>
Notice how the divs are nested as a table structure.
CSS
.table-row{
display:table-row;
}
.table-cell{
display:table-cell;
vertical-align:middle;
}
.foo {
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}
http://jsfiddle.net/xzj6eauf/
My code:
#dropdown {
width: 80px;
height: 80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word {
font-size: 40px;
color: orangered;
}
#dropdown:hover {
background-color: cyan;
}
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>
I want to display the class .content when the mouse is hovering on the button. Before the hover, .content should not be visible to the user. What CSS code can be used to get the above output?
All you have to do is move the .content div inside the .button div and apply the following CSS:
.content{
display: none;
}
.button:hover .content{
display: block;
}
Here is the JSFiddle.
One way to do is it to add a common div parent that contains both the button and the .content div. The drawback to this method is that the .content class will show up if the user enters .parent div. so if your parent div covers half the page your button is going to show up if you hover anywhere on that area.
<div class="parent">
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>
</div>
#dropdown
{
width:80px;
height:80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word
{
font-size:40px;
color:orangered;
}
#dropdown:hover
{
background-color: cyan;
}
.content{
visibility: hidden;
}
.parent:hover .content{
visibility: initial;
}
Use CSS syntax visibility: visible|hidden|collapse|initial|inherit;
#dropdown {
width: 80px;
height: 80px;
border-radius: 80px;
border-width: 0px;
transition: background-color 1s;
}
#dropdown_word {
font-size: 40px;
color: orangered;
visibility: hidden;
}
#dropdown:hover #dropdown_word {
background-color: cyan;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="heading">
<h2>
H2 goes here
</h2>
<div class="button">
<p>
<button id="dropdown">
<span id="dropdown_word"> V </span>
</button>
</p>
</div>
</div>
<div class="content">
<h4>
H4 goes here
</h4>
<p>
Text goes here
</p>
</div>
#content{display:none;}
#dropdown:hover + #content{display:block;}
You can do it using JS.
var element = document.getElementsByClassName('button')[0];
element.addEventListener("mouseover",function(){
document.getElementsByClassName('content')[0].style.display = "block";
});
element.addEventListener("mouseout",function(){
document.getElementsByClassName('content')[0].style.display = "none";
});
make content hide by default
.content {
display: none;
}
because the button isn't at all related with .content you can't do this accurately with css alone
you can do this with css only if .content has a relation with the button ( sibling,child,parent )
so in this case you have to use jquery.
check here jsfiddle
css code added : .content { display:none}
jquery code added :
$("#dropdown").hover(
function() {
$('.content').show()
},
function() {
$('.content').hide()
}
);
core-list is not showing (Polymer 0.5.5) and I don't now how to set it.
At first I made it with puting height:100% into everywhere but it wasn't good when I wanted to use this in somewhere. The scrolling was missed up.
Now I want to make it with flex but nothing to see... The header is there just the core-list is missing. What should I change in my code?
<polymer-element name="me-table-list" attributes="items selectedItem mode selectable info minHeight marginTop" layout vertical flex>
<template>
<style>
core-animated-pages {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.row {
transition: 0.3s;
box-sizing: border-box;
height: 50px;
border-bottom: 1px solid #ddd;
padding-left: 15px;
padding-right: 15px;
cursor: default;
background-color: white;
vertical-align: middle;
}
.row:hover {
background-color: #eee;
overflow: hidden;
}
#container {
overflow: visible;
height: 100%;
}
.card {
position: absolute;
top: -100px;
left: 0;
bottom: 30px;
right: -80px;
border-radius: 3px;
z-index: 5;
text-align: start;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn {
width: 40px;
}
#header {
height: 50px;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
</style>
<me-table-style></me-table-style>
<core-style ref="me-table-style"></core-style>
<table-element></table-element>
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div id="container" layout vertical flex>
<div layout vertical flex>
<core-animated-pages selected="{{detailSelector}}" transitions="hero-transition cross-fade" layout vertical flex>
<section layout vertical flex>
<div hero-p cross-fade hero-transition flex>
<paper-shadow style="background-color:white;">
<paper-shadow id="header" hero-id="card" class="title" layout horizontal center>
<template repeat="{{title in items.titles}}">
<div class="col-{{title.index}}">
<span>{{title.text}}</span>
</div>
</template>
</paper-shadow>
<div layout vertical flex style="overflow:auto">
<core-list data="{{items.rows}}" height="120" selection="{{selection}}" flex>
<template>
<div class="row" layout horizontal center hero?="{{selection === model}}">
<template repeat="{{column in model.columns}}">
<template if="{{column.type === 'text'}}">
<div class="col-{{column.index}}">
<span>{{column.text}} </span>
</div>
</template>
<template if="{{column.type ==='buttonOne'}}">
<div class="col-{{column.index}}">
<paper-button raised class="btn" on-tap="{{btnOneClicked}}" label="1">
{{column.text}}
</paper-button>
</div>
</template>
<template if="{{column.type ==='checkbox'}}">
<div class="col-{{column.index}}">
<paper-checkbox checked="{{column.text}}">
</paper-checkbox>
</div>
</template>
</template>
</div>
</template>
</core-list>
</div>
</paper-shadow>
</div>
</section>
<section id="details" style="height:100%; width:100%;">
<div class="card" hero cross-fade hero-transition>
<core-signals on-core-signal-close="{{closeRow}}"></core-signals>
<div horizontal hero end-justified layout self-stretch>
<paper-icon-button icon="close" on-tap="{{closeRow}}" style="z-index:5;" hero></paper-icon-button>
</div>
<content item="{{row}}" hero-id="card" selected="[card]" class="content" hero fit> </content>
</div>
</section>
</core-animated-pages>
</div>
</div>
</template>
set core-list height in pixel.