Display an image in place of a check mark with codeigniter - codeigniter

I found this code on here. Does anyone know if this would work with codeigniter. I want the ability for some to click on a image and perform the same function as a check box. After you click the image it would display a new image overlay that would be a check mark on top of the image.
Code I found.
input[type=checkbox] {
display: block;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;
}
input[type=checkbox]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#000" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}
<input type="checkbox" id="check" />
<div></div>

Related

SVG Cross Browser (Firefox) Issues

I tried to adapt a codepen thing for waves with svgs.
Works just fine in Chrome, Safari and Edge, but not in Firefox (and IE, but I don't care too much about that).
I suspect some Syntax problem with the svg. The animation works just fine, but the svgs are not displayed correctly. In Firefox it's just a straight line instead of waves.
Anyone out there, that has an idea about that?
Thanks a lot in advance.
.waves {
width: 100%;
height: 7em;
position: relative;
overflow: hidden;
background-color: #f6f9fc;
}
.wave
{
width:calc( 100% + 4em );
height:100%;
position:absolute;
left:-2em;
background:bottom center repeat-x;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
/* Individual wave layers */
.wave_1
{
animation-name:wave_1;
animation-duration:3400ms;
animation-delay:-1200ms;
z-index:2;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #e0e7f1;
top: -3em;
}
.wave_2
{
z-index:1;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#e0e7f1" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #245aa6;
top: 0em;
}
#keyframes wave_1
{
from { transform: rotate(0deg) translatey(-0.61em) rotate(0deg) ; }
to { transform: rotate(360deg) translatey(-0.61em) rotate(-360deg) ; }
}
<div class="waves">
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
</div>

SVG shows not correctly in Firefox browser

I have next svg object which shown well in Chrome and AI, but it shows not correctly in Firefox. In my svg i have 2 textPath tags, i try to set italic font-style for both of them however only 1 textPath effected. How can i fix it if i still want 2 textPath elements be in 1 svg object?
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.13161635632674862"><text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Carter One';" itemzoom="0.4305468677769046 0.45416505875126006"><textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath><textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath></text></g><defs><path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path><style>#font-face {
font-family: 'Carter One';
src: local('Carter One'), local('CarterOne'), url(http://fonts.gstatic.com/s/carterone/v9/VjW2qt1pkqVtO22ObxgEBfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}</style></defs></svg>
The problem seems to be that the font you selected, Carter One, has no italics variant. So the browser needs to use a fallback (which, as far as I know, amounts to skewing the glyphs). Firefox seems to fail with the simultanuous task of "inventing" an italics font, painting a stroke and writing it on a text path.
It is not a problem to use multiple textPath elements inside one text. Only when using both a non-zero stroke-width and font-style:italics a font with a known italics style needs to be referenced. For example Lato has one:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
<textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath>
</text>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>
As an aside, while I don't know exactly which browsers support it, at least most modern browsers seem to know the paint-order CSS property, which removes the need to paint the text twice. paint-order:stroke paints the stroke below the fill:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;paint-order:stroke" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>

Light gray asset on black background - Blurry

I have a light gray SVG button in a label with black background. The SVG button seems 'blurry' / 'bolder' on the edges. This is not something I can notice when using a white background.
I suppose it is related to the high contrast between background and asset colour.
How can I get this better?
Btw, I'm using the SVG has background image of a div and respecting the original size of image.
CSS code of the div containing the SVG asset:
position: absolute;
z-index: 2;
width: 42px;
height: 42px;
padding: 0px;
border: 0px;
top: 20px;
right: 20px;
background-image: url(/assets/images/icons/create-document-close-button.svg);
background-repeat: no-repeat;
background-color: transparent;
background-size: 36px 36px;
background-position: center center;
transition: all 100ms ease-in-out;
The SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="States" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Buttons-&-States-(Documents-Steps)" transform="translate(-104.000000, -138.000000)">
<g id="Close-Button" transform="translate(104.000000, 138.000000)">
<g>
<circle id="circle" fill="#E9EEF2" cx="18" cy="18" r="18"></circle>
<polygon id="X" fill="#9FADB5" transform="translate(17.868000, 17.808000) rotate(-45.000000) translate(-17.868000, -17.808000) " points="16.968 23.616 18.768 23.616 18.768 18.672 23.736 18.672 23.736 16.944 18.768 16.944 18.768 12 16.968 12 16.968 16.944 12 16.944 12 18.672 16.968 18.672"></polygon>
</g>
</g>
</g>
</g>

Css3 animation blowing bubble

I'm making a CSS3 animation in which I want a bubble to appear like it is blown from a pipe like a real bubble. Can any one guide how to do that?
Like this drop appears in the upper image the bubble should appear like a real bubble. This is what I have done so far, but it doesn't look good! It seems like phone is coming out of a square. Is there any way to make it look like its coming out of a bubble?
#Capa_2{
position: absolute;
overflow: visible;
top: 100px;
}
#Capa_1{
position: absolute;
top: 60px;
left: 68px;
animation: vibrate 0.1s 4s 3;
}
#chat {
opacity: 0;
animation: grow 3s 2s ease-in forwards;
}
#keyframes grow {
0% {
/*transform: scale(2,2);*/
}
40% {opacity: 1;
transform: scale(2.5,1.6) translate(300px,-350px);
}
70% {opacity: 1;
transform: scale(2.4,1.5) translate(300px,-280px);
margin-left: -2px;
margin-top: 2px;
}
100% {opacity: 1;
transform: scale(2,2) translate(300px,-350px);
margin-left: 0px;
margin-top: 0px;
}
}
#phone {
opacity: 0;
animation: ring 2.5s 4.5s forwards;
}
#keyframes ring {
0% {
opacity: 1;
transform: translateX(-900px) rotate(0deg);
}
100% {
transform: translateX(2px) rotate(360deg);
opacity: 1;
}
}
#phone {
opacity: 0;
animation: ring 2.5s 2s forwards;
}
#keyframes vibrate {
0% {margin-left: 0px;}
25% {margin-left: -3px;}
50% {margin-left: 0px;}
75% {margin-left: 3px;}
100% {margin-left: 0px;}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<link href="button.css" rel="stylesheet" media="all">
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 435.244 435.244" style="enable-background:new 0 0 435.244 435.244;" xml:space="preserve">
<g>
<g>
<path id="chat" d="M75.146,425.343v-96.354C27.281,294.43,0,244.745,0,191.603C0,91.414,97.624,9.901,217.622,9.901 s217.622,81.513,217.622,181.701c0,100.186-97.624,181.701-217.622,181.701c-14.218,0-28.533-1.189-42.631-3.539L75.146,425.343z M217.622,39.177c-103.854,0-188.346,68.379-188.346,152.425c0,45.561,25.014,88.418,68.636,117.568l6.504,4.346v62.022 l65.497-36.452l5.2,0.973c14.021,2.63,28.321,3.968,42.508,3.968c103.856,0,188.346-68.376,188.346-152.425 C405.968,107.556,321.479,39.177,217.622,39.177z" fill="#000000"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 760.025 760.025" style="enable-background:new 0 0 460.025 460.025;" xml:space="preserve" width="62px" height="62px">
<path id="phone" d="M354.363,271.978c-11.661-22.385-28.972-40.292-51.43-53.211c-8.664-5.009-16.844-7.445-25.008-7.445 c-3.176,0-6.362,0.383-9.489,1.134c-10.368,2.513-20.326,7.363-30.442,14.831c-3.194,2.357-7.101,3.551-11.614,3.551 c-5.494,0-11.444-1.886-15.518-4.921c-29.574-22.047-54.67-47.141-76.712-76.711c-4.334-5.82-7.769-18.471-1.376-27.136 c7.47-10.118,12.322-20.077,14.837-30.461c2.694-11.19,0.629-22.467-6.3-34.455C128.376,34.669,110.468,17.359,88.089,5.7 C80.837,1.92,73.416,0,66.033,0C53.686,0,42.13,5.363,32.62,15.499c-8.742,9.303-16.471,19.154-25.389,31.082 C-0.932,57.51-0.259,70.117,0.336,81.24l0.015,0.237c1.002,14.108,6.272,30.804,16.11,51.025 c16.643,34.227,40.282,66.727,72.261,99.354c6.569,6.708,32.767,32.907,39.479,39.476c32.634,31.989,65.134,55.626,99.355,72.267 c20.226,9.839,36.917,15.107,51.029,16.111l0.237,0.015c2.903,0.155,6.006,0.3,9.026,0.3c0.001,0,0.001,0,0.001,0 c7.451,0,17.097-0.818,25.631-7.198c11.931-8.916,21.784-16.646,31.074-25.378C360.843,312.168,364.508,291.429,354.363,271.978z" fill="#1F45FC"/>
</svg>
</div>
</body>
</html>

firefox 35.0.1: svg mask animation doesn't work

after my firefox update to version 35.0.1 my svg animations doesn't work in firefox, but it was working in previous versions and it still works in firefox beta (36), nightly (37.0a2) and other browsers (opera, chrome, safari, modern ie):
html:
<svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986 3038.43 55 53.758" enable-background="new -1061.986 3038.43 188.279 53.758" xml:space="preserve">
<g id="logo-mask" >
<rect id="sygnet" fill="#FFFFFF" x="-1100" y="3038" width="100" height="50"/>
</g>
<g id="logo-black">
<rect id="sygnet" fill="#000000" x="-1100" y="3038" width="100" height="50"/>
</g>
</svg>
<div id="button">Click me!</div>
css:
body{
background-color: #777777;
}
#button{
margin-right: 100px;
display: block;
width: 100px;
height: 20px;
float: right;
background-color: #fff;
cursor: pointer;
text-align: center;
line-height: 20px;
}
js (using snap.svg):
$(document).ready(function(){
var s = Snap(),
svg = Snap.select('#logo-svg'),
logo = Snap.select('#logo-mask'),
logoBlack = Snap.select('#logo-black'),
mask = svg.rect(-1100, 2830, 280, 100).attr({
fill: 'white',
id: 'maska-logo'
});
logoBlack.attr({'mask': mask, 'opacity': 1});
});
$(document).on('click', '#button', function(){
var maska = Snap.select('#maska-logo');
maska.animate({
transform: 'T'+[0,200]
}, 500);
});
simple example: http://jsfiddle.net/7yq14L0f/2/
any idea, why? :(
It was caused by a change in the Firefox code which was not completely correct and which was then fixed. Bug 932771 caused it and bug 1127507 which was backported as far as Firefox 36 fixed it.

Resources