4 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 24 weeks 5 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 88
Points: 123

Hello

I am trying to customise this page:

http://www.dimadayoub.net/mail/flipMail.html

At the bottom of the screen is an envelope which I am happy with, but wish to remove the checkbox entirely without affecting the animated envelope.

I have tried to separate the code that make both appear and work, but they are interlinked.

How would I go about that, please?

This is the code:

body {
    background-color: #fcfcfc;
    font: 100%/160% verdana, arial, helvetica, sans-serif;
 }
 
#cb0 {
 
margin-top: 500px;
margin-left:130px;	
height: 100px;
width: 100px;
 }
 
#cb0:checked + #envelope label {
    transform: rotateX( -360deg );
 }
 
#envelope {
    width: 3em;
    height: 3em;
    margin: 1em;
    border-radius: 0.25em;
    background-color: #fff;
    box-shadow: 0 0 0.25em #c7c7c7;
    transition: 1s ease-in-out;
 }
 
#envelope:hover {
    box-shadow: 0 0 0.25em #626262;
 }
 
#envelope label {
    display: block;
    height: 100%;
    background-image: url( <a href="http://www.dimadayoub.net/mail/image/mail-icon1.png" rel="nofollow">http://www.dimadayoub.net/mail/image/mail-icon1.png</a> );
    transition: 2s ease-in-out;
    cursor: pointer;
 }
</style>
 
</head>
<body>
 
 <input id="cb0" type="checkbox">
  <div id="envelope">
  <label for="cb0"></label>
 </div>

Many thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9702
Points: 3778

More detail please

What do you want to trigger the animation? Right now, changing the checkbox condition is the trigger. If you break that connection, what then?

Do you want the envelope to spin forever or a number of times or have something else trigger the event.

You tell us what you don't want, but not what you do.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 24 weeks 5 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 88
Points: 123

Thanks, Gary, for your

Thanks, Gary, for your reply.

On this page http://www.dimadayoub.net/frina/Contact.aspx I would want to replace that Send button with the mail icon and possibly place it in a bordered-box.

It would rotate for as long as it took for the form to be sent - normally a second or two. That would involve server-side code, I know.

The checkbox would be useful to denote the form had been sent (and the icon would stop flipping at the same time), and could be placed under the email field in the Web page above. In other words, the behaviour of the mail icon and the check-box are related, but I would need to be able physically separate them in order to position them on the form.

Does it sound a bit elaborate?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9702
Points: 3778

Too tricked up for my taste, but …

I'd go for a gif and start it by an onclick event handler (which I leave to you). On the server side, address the template that handles the form, then on true return a new page which will reset everything.

Not tested beyond straight html

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, height=device-height, initial-scale=1"
          name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	background-image: url("/images/bg.jpg")
	background-size: cover;
	background-position: center;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 1em;
    }
 
    p {
	font-size: 1em;
    }
 
    form {
	background-color: transparent;
	border: 1px solid black;
	margin: 0 auto;
	padding: 1.5em;
	width: 25em;
    }
 
    label {
	display: block;
	margin: 1em 0;
    }
 
    h1 {
	margin-top: 0;
    }
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <form action="#"
	    method="get">
      <h1>
	Contact Form
      </h1>
 
      <fieldset>
	<legend>
	  Contact info
	</legend>
 
	<label for="name">
	  Name
	  <input type="text"
		  name="name"
		  id="name">
	</label>
 
	<label for="email">
	  Email Address
	  <input type="text"
		  name="email"
		  id="email">
	</label>
 
	<label for="mailtext">
	  Text
	  <textarea
		  name="mailtext"
		  id="mailtext"
		  cols="40">
	  </textarea>
 
	  <label for="send">
	    Send
	    <button
		    id="send"
		    name="send"
		    type="submit"
		    title="Send email"
		    onclick="[local script.js]">  <!-- or onsubmit -->
	      <img src="[yourmailicon].gif">
	    </button>
	  </label>
      </fieldset>
    </form>
  </body>
</html>

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 24 weeks 5 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 88
Points: 123

It looks fine, Gary,

It looks fine, Gary, thanks!

I can see you have put a fair amount of work into it.

Grateful.