Записи по тегу css3

Анастасия

Работа с массивами в jquery

  var ar=["123", "234", "345"];
  var str=ar.join(", ");
  $.each(ar, function(index, value){
  	//...
  });
  // массив элеменов
  ar=$("li").get(); 
  var arraylength=ar.length;
  //перевести все значения li в верхний регистр 
  ar=$.map(ar, function(v, i){
  	return ((i+1)+"."+n.toUpperCase()); 
  });
  //выбрать эл-ты, длина которых больше 1
  ar2=$.grep(ar, function(v){
  	return v.length>1;
  });
  //выбрать эл-ты по регэкспу (строки, которые начинаются с A..D)
  ar2=$.grep(ar, function(v){
  	return v.match(/^[A-D]/);
  });
  
  
  newarray=$.grep(ar, callback, is_invented);
  //Если is_invented, !callback.
  
  //отрезать кусок массива
  subar = ar.slice(m,n);
  //объединить
  ar.concat(subar);
  
  //сортировка
  //сортировка по алфивиту, но с учетом регистра, т.е. все
  //строки должны начинаться с одного регистра
  ar.sort(); 
  //численная сортировка по возрастанию
  ar.sort(function(a,b){ return a-b;});
  //сортировка вложенных структур
  ar=[{
  	id: 1,
	name: "name1"
  },
  {
  	id: 2,
	name: "name2"
  }];
  //по id
  ar=ar.sort(function(a,b){return b.id-a.id});
  //по name
  ar=ar.sort(function(a,b){
  	if(a.nameb.name){
		return -1;
	}
  	if(a.name == b.name){
		return 0;
	}
  });
  
Теги: css3,html5,javascript
Анастасия

Рисование на canvas'е

Конспект по рисованию в html5.

<canvas id="canvasid" width="123" height="123"></canvas>

Поддерживается в браузерах: IE 7+, Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, iPhone 1+, Android 1+.
Функции javascript для рисованию:

  var can=$('#canvasid');
  //3d есть только в экспериментальном виде в некоторых браузерах
  var context=can.getContext("2d");

  //x,y,width,height
  context.fillRect(50, 50, 100, 100);
  // закрашивает
  context.fillStyle("solid #000");
  //рисует только границу 
  context.strokeRect(50, 50, 100, 100);
  // почистить прямоугольник 
  context.clearRect(x, y, w, h);

  // при смене размера окна очищается весь холст
  context.width=context.width;
  
  //пути
  context.beginPath();
  context.moveTo(x,y);
  context.lineTo(x2, y2);
  //...
  context.strokeStyle="#eee";
  context.stroke();
  
  //тексты
  context.font="Arial 16px bold";
  context.textAlign="start"; //end, left, right, center
  context.textBaseline="top"; //middle, bottom
  context.fillText("Text", x,y);
  
  //градиенты
  //1. линейный
  var my_gradient=context.createLinearGradient(0,0,100,0);
  // как минимум два цвета
  my_gradient.addColorStop(0, "#000"); 
  my_gradient.addColorStop(0, "#fff");
  context.fillStyle=my_gradient;
  context.fillRect(0,0,100,100);
  
  //2. радиальный
  var my_radial_gradient=context.createRadialGradient(0,0,100,0);
  // ... дальше тоже самое
      
  //картинки
  var image=$("img#source");
  //рисует картинку
  context.drawImage(image, x,y);
  //масштабирует до scale_w x scale_h и рисует картинку
  context.drawImage(image, x,y, scale_w, scale_h);
  //вырезает прямоугольник (sx,sy,dx,dy) из
  context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
  // исходного изображения и рисует его в (dx,dy,dw,dh)
  // загрузить картинку и нарисовать:
  var cat = new Image();
  cat.src = "..."; 
  cat.onload = function(){context.drawImage(cat, x, y)};	

Чтобы все это работало в ie, надо подключить библиотеку excanvas:

  <!--[if IE]>
     <script src="excanvas.js"></script>
  <![endif]-->

Теги: css3,html5,javascript
Анастасия

jQuery.animate и css transform

Задача: при наведении мышкой на картинку анимировать ее, чтобы увеличивался масштаб, или, чтобы она поворачивалась.

Для этого надо скачать два патча для jQuery v.1.4.3
первый - https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
второй - https://github.com/zachstronaut/jquery-css-transform/
Приделать их в head:
    <script src="/js/modernizr-1.6.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery/jquery-css-transform.js" type="text/javascript"></script>
    <script src="/js/jquery/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>   

и можно анимировать:
    $("#anim").animate({rotate: "5deg"}, 500); //поворачивать полсекунды на 5 градусов
    $("#anim").animate({scale: "1.05"}, 500); //чуть-чуть увеличивать полсекунды

Пример:
 
    //стрелочки щевеляться
	if (Modernizr.csstransforms) {
		$(".workflow li.arrow1, .workflow li.arrow3, .workflow li.arrow5").hover(function(){
			$(this).animate({
					rotate: "5deg",
				}, 600).animate({
					rotate: "-5deg",
				}, 700);
			}, function(){
				$(this).css({
					transform: "rotate(0deg)",
					"-moz-transform": "rotate(0deg)",
					"-webkit-transform": "rotate(0deg)"
				});
			});
			$(".workflow li.arrow2, .workflow li.arrow4").hover(function(){
				$(this).animate({
					scale: "1.05",
				}, 600).animate({
					scale: "0.95",
				}, 700);
			}, function(){
				$(this).css({
					transform: "scale(1)",
					"-moz-transform": "scale(1)",
					"-webkit-transform": "scale(1)"
				});
			});
		}
Теги: css3,javascript
Анастасия

HTML5 CSS3 таблица с закругленными краями

Скругление краев не работает с таблицами, у которых border-collapse:collapse. Т.е. вот так не работает:
table.cal-table{	
   border-collapse: collapse;
   border: 3px solid #fff;
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px;
}
Лечится это селекторами угловых td-шек:
table.cal-table tr:last-child td:first-child {
   -moz-border-radius-bottomleft:8px;
   -webkit-border-bottom-left-radius:8px;
   border-bottom-left-radius:8px;
   -khtml-border-bottom-left-radius: 8px;
   border:1px solid red;
}
table.cal-table tr:last-child td:last-child {
   -moz-border-radius-bottomright:8px;
   -webkit-border-bottom-right-radius:8px;
   border-bottom-right-radius:8px
   -khtml-border-bottom-right-radius: 8px;
   border:1px solid red;
}
Теги: css3,html5
Анастасия

Проверка поддержки элементов html5 в браузере

Javascript библиотека Modernizr упрощает проверку поддержки браузером новых фич html. Например:
if (Modernizr.canvas) {
   var c = document.createElement('canvas');
   // порисуем
}
if (Modernizr.video){
   if(Modernizr.video.ogg){
            // кодек ogg доступен
   } 
   else if (Modernizr.video && Modernizr.video.h264){
   }
}
if (Modernizr.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
    alert("вот вы где: "+position.coords.latitude+","+position.coords.longitude);
  });  
}   
if (!Modernizr.inputtypes.date){
  // рисуем календарик руками
}
Или вот скругленные края: nav a { background: #ccc url(not_adjustable_tab_image.png) bottom left no-repeat; } .borderradius nav a { background: #ccc; border-radius: 4px 4px 0 0; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; } .borderradius nav a:focus, .borderradius nav a:hover { background-color: #fff; } .borderradius - версия css для браузеров, поддерживающих скругленные края. В общем пользовать обязательно и обновлять регулярно :)
Теги: css3,html5,javascript
© 2002-2016 Креограф. Все права защищены законом РФ
 Русский /  English