» Вопросы по CSS

А куда писать?

В цитате вашего сообщения ссылка на ваш пост в теме по JavaScript.
Уже всё отвечено и сделано.

сколько?

Добавлено:
И 3-4-5 переменные должны быть скрыты ок?

Цитата:

сколько?

200 руб. устроит?

Цитата:

И 3-4-5 переменные должны быть скрыты ок?

Ну окей-окей, только давайте перейдём в правильную тему по JS
http://forum.ru-board.com/topic.cgi?forum=31&topic=12915&start=20

Эта тема по CSS и наше общение вроде как не в тему.

замутил popup с оверлеем на css (вот по этому мэнюалу )
всё красиво и замечательно вышло, кроме одной вещи....

не могу найти как бы отключить прокрутку основного окна, при "всплывшем" попапе?

оно бы как не критично.. но внизу страницы имеются элементы, которые при прокрутке вылезают наверх, ставь z-index хоть мильён...

или может можно эти элементы как-то скрыть?

скрипты, напомню, запрещены...

HeT BonpocoB

Цитата:

замутил popup с оверлеем на css

эм... что то мне это напоминает. аха, это, с чего бы..
Модальное окно автоматическое открытие


Цитата:

но внизу страницы имеются элементы, которые при прокрутке вылезают наверх, ставь z-index хоть мильён

а посмотреть? может там индекс на js считается.
проблема с аналогичным css в том, что нужно применить свойства к body и html, дабы отключилась прокрутка.

Mavrikii

Цитата:

проблема с аналогичным css в том, что нужно применить свойства к body и html, дабы отключилась прокрутка.

т.е. без скриптов никак?
ладно...

мелкий вопрос:

Код: <div id="popup" class="overlay"><a href="#"></a>

HeT BonpocoB

Цитата:

.overlay + a {}  

я тут немного отвлекся, поэтому хрень написал )

+ - след сиблинг, если нужен прямой потомок
.overlay > a

http://www.w3schools.com/cssref/sel_element_pluss.asp
http://www.w3schools.com/cssref/sel_element_gt.asp

либо без прямого потомка
.overlay a {}

как полагаете, коллеги, вот такая конструкция имеет право на существование?
https://jsfiddle.net/vopros/gbd5km67/
(больше всего беспокоит повёрнутый текст на "кнопке")
или на разных браузерах-разрешениях будет выглядеть по разному?

я тут уже почитай два дня убил на изучение вопроса "вертикального текста"
когда начинал и не предполагал что всё так сложно, в м$-ворде как-то было попроще

+ вдогонку... нет ли в css какого нить @рула на прокрутку?
ну допустим когда страница пролистана докуда-то - срабатывает рул... ?

Просьба подсказать по выравниванию объекта на странице. Есть стек для программы-редактора и никак не получается сделать, чтобы объект показывался посередине. Перепробовал всё, что знаю.
Здесь сам стек, и полученная страница. Хотелось бы сделать так, чтобы выравнивание по середине было изначально в CSS самого стека.

Стек не является объектом форматирования. Попробуйте переформулировать вопрос в терминологии HTML.
Если надо блок по середине ширины сделать - ставьте ему margin: auto. Другие варианты можно предложить, когда будет понятна схема макета и цель.

stupom
Этот стек вставляется на страницу и по-умолчанию он стоит слева, и настроек для его положения нет вообще. Поэтому и хотелось бы сделать так, чтобы по-умолчанию при добавлении всё (звёзды и текст) было по центру.

Код: <div style="border: red 1px solid;"><div style="border: green 1px solid; width: 50%; margin: auto;">Текст</div></div>

stupom
Спасибо за советы! Первый бесполезно, пробовал менять на разные значения и добавляя другие, элемент меняет место на странице, но почему-то всё равно встаёт не по центру, а чуть правее центра. Со вторым не понял, куда именно этот код и зачем в нём бордер.

Это пример расположения блока по середине ширины родительского. border только для того, что б визуализировать блоки и сделать очевидным взаимное положение.

Попробовал в программе, использующей bootstrap, сделать страницу, но никак не пойму, как картинку (она в среднем блоке) в блоке сделать по ширине экрана. Просьба подсказать, как и что изменить, чтобы картинка по ширине экрана была (файл).

ИМХО - изучение библиотек и фреймворков для HTML-CSS-JavaScript не целесообразно. Без знания нативных языков не обойтись. Вы всё равно к этому придёте, только потеряв кучу времени, если конечно не бросите вебдизайнить.

может кому не лень будет разобраться?
в твиттере есть нехитрая анимация "дня рождения" в виде шариков (увидеть можно в рандомном профайле с незакрытой датой рождения по тегу > #HappyBirthday )

не могу отыскать их в коде, это скрипт или простой css?
[more=всё что нашёл в css].Balloon--red {background-image:url(https://abs.twimg.com/a/1468296502/img/profiles/balloons/red.png)}
.Balloon--blue {background-image:url(https://abs.twimg.com/a/1468296502/img/profiles/balloons/blue.png)}
.Balloon--purple {background-image:url(https://abs.twimg.com/a/1468296502/img/profiles/balloons/purple.png)}
.Balloon--yellow {background-image:url(https://abs.twimg.com/a/1468296502/img/profiles/balloons/yellow.png)}
.Balloon--green{background-image:url(https://abs.twimg.com/a/1468296502/img/profiles/balloons/green.png)}

.Balloon {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
background-size:contain;
bottom:-240px;
height:240px;
left:0;
opacity:.9;
-ms-filter:"alpha(opacity=90)";
pointer-events:none;
position:fixed;
width:130px;
z-index:100
}[/more]

HeT BonpocoB

Цитата:

это скрипт

но частично можно сделать с помощью css, вот только начальные и конечные координаты нужно задавать случайно, css это не может.
https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm
ps: саму анимацию можно посмотреть только если есть аккаунт, видимо.

Mavrikii

Цитата:

ps: саму анимацию можно посмотреть только если есть аккаунт, видимо.

это про твиттер?
да не, вроде показывает и без..
вот у девочки Ссылка например NSFW!
(рандомный акк )

ладно, коль скрипт то поищу чтонить похожее на css завтра

HeT BonpocoB

Цитата:

да не, вроде показывает и без..

не показывало с ABP )


Код: define("app/ui/profile/balloons_animation",["module","require","exports","core/component","app/utils/random","app/utils/params"],function(module, require, exports) {
function BalloonsAnimation(){this.defaultAttrs({playBalloonsAnimation:!1,colors:["Balloon--red","Balloon--blue","Balloon--yellow","Balloon--purple","Balloon--green"],sizes:["Balloon--small","Balloon--medium","Balloon--large"],scale:[.65,.85,1],speed:[.21,.25,.3],numberOfBalloons:42,maxBalloonDriftOnXAxis:600,minInitialDelay:500,maxDelayAfterInital:4500,fpsDebuggerBoxClass:"Balloon-fpsDebugger",debuggerBoxParam:"debug"}),this.animationStates={inProgress:0,finished:1},this.balloonsData=[],this.animationStep,this.animationStartTime,this.balloonAnimationRequest,this.viewportSize,this.lastAnimationStepTime=0,this.windowWasBlurred=!1,this.frameCount=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0,this.averageFps=0,this.easeIn=function(a){return 1-Math.cos(a*(Math.PI/2))},this.pathFunctions=["linear","curve","sinusoidal"],this.linear=function(a,b,c,d){return{xAxis:b*c,yAxis:b*d}},this.curve=function(a,b,c,d){var e=2+a*1;return{xAxis:Math.pow(b,e)*c,yAxis:b*d}},this.sinusoidal=function(a,b,c,d){var e=(2+a*2)/4;return{xAxis:Math.sin(b*Math.PI*e)*c,yAxis:b*d}},this.balloonAnimationDuration=function(a,b){var c=this.attr.speed[b%this.attr.speed.length];return a/c},this.isAnimationInProgress=function(){return this.balloonsData.some(function(a){return a.state===this.animationStates.inProgress},this)},this.setBalloonPosition=function(a,b){var c=this.easeIn(b),d=this[a.chosenPath](a.randomFactor,c,a.xSize,a.ySize),e=a.startPosition.xAxis+d.xAxis,f=a.startPosition.yAxis+d.yAxis;a.$node.css({transform:"matrix("+a.scale+", 0, 0, "+a.scale+", "+e+", -"+f+")"})},this.getAnimationStep=function(){var a=Date.now();!this.animationStartTime&&this.animationStartTime!==0?this.animationStartTime=a:this.calculateFpsInfo(a),this.windowWasBlurred&&(this.windowWasBlurred=!1,this.animationStartTime+=a-this.lastAnimationStepTime),this.lastAnimationStepTime=a,this.balloonsData.forEach(function(b){var c=this.animationStartTime+b.delay;if(a>c){var d=a-c,e=d/b.animationDuration;e<=1.2?this.setBalloonPosition(b,e):(b.state=this.animationStates.finished,b.$node.addClass("u-hidden"))}},this),this.isAnimationInProgress()?this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep):this.cleanUpBalloons()},this.startAnimation=function(){this.animationStep=this.getAnimationStep.bind(this),this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep)},this.requestAnimation=function(a,b,c){this.isAnimationInProgress()||(this.resetControlVariables(),this.calculateViewPortSize(),this.createBalloons(),this.resetFpsInfo(),this.trigger("uiBalloonAnimationPlayed",{autoplay:a||c&&c.autoplay}),this.startAnimation())},this.chooseBalloon=function(a){var b=this.attr.colors[a%this.attr.colors.length],c=this.attr.sizes[a%this.attr.sizes.length];return["Balloon",b,c].join(" ")},this.createBalloons=function(){var a=this.pathFunctions.length;for(var b=0;b<this.attr.numberOfBalloons;b++){var c=$("<span>",{"class":this.chooseBalloon(b)});this.$node.append(c);var d=c.height(),e=c.width(),f=this.viewportSize.width-e,g=f*Math.max(b-5,0)/this.attr.numberOfBalloons,h=g+f*Math.min(b+5,this.attr.numberOfBalloons)/this.attr.numberOfBalloons,i={xAxis:random.getRandomInteger(g,h),yAxis:-1*d},j=random.getRandomInteger(i.xAxis,i.xAxis+this.attr.maxBalloonDriftOnXAxis)-this.attr.maxBalloonDriftOnXAxis/2,k=this.pathFunctions[b%a],l=Math.random(),m=random.getRandomInteger(this.attr.minInitialDelay,this.attr.minInitialDelay+this.attr.maxDelayAfterInital),n=Math.abs(j-i.xAxis),o=Math.abs(this.viewportSize.height-i.yAxis),p=this.balloonAnimationDuration(o,b);this.balloonsData.push({$node:c,state:this.animationStates.inProgress,delay:m,animationDuration:p,startPosition:i,scale:this.attr.scale[b%this.attr.scale.length],ySize:o,xSize:n,chosenPath:k,randomFactor:l})}},this.cleanUpBalloons=function(){this.balloonAnimationRequest&&window.cancelAnimationFrame(this.balloonAnimationRequest),this.balloonsData.forEach(function(a){a.$node.remove()}),this.balloonsData=[],this.logFpsInfo()},this.calculateViewPortSize=function(){var a=$(window);this.viewportSize={height:a.height(),width:a.width()}},this.setWindowBlurredFlag=function(){this.windowWasBlurred=!0},this.resetControlVariables=function(){this.balloonsData=[],this.animationStep=undefined,this.animationStartTime=undefined,this.balloonAnimationRequest=undefined,this.viewportSize=undefined,this.lastAnimationStepTime=0,this.windowWasBlurred=!1},this.calculateFpsInfo=function(a){if(a>this.animationStartTime+this.attr.minInitialDelay+this.attr.maxDelayAfterInital/2){var b=Math.round(1e3/(a-this.lastAnimationStepTime)*100)/100;this.frameCount+=1,this.averageFps+=b,this.lowestFps=Math.min(this.lowestFps,b),this.highestFps=Math.max(this.highestFps,b)}},this.resetFpsInfo=function(){this.frameCount=0,this.averageFps=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0},this.logFpsInfo=function(){var a=console;params.fromQuery(window.location)[this.attr.debuggerBoxParam]&&(a.log("Average FPS: "+this.averageFps/this.frameCount),a.log("Lowest FPS: "+this.lowestFps),a.log("Highest FPS: "+this.highestFps))},this.after("initialize",function(){this.attr.autoPlayBalloonsAnimation&&this.on(document,"uiSwiftLoaded uiPageChanged",this.requestAnimation.bind(this,!0)),this.on(document,"uiBeforePageChanged",this.cleanUpBalloons),this.on(window,"blur",this.setWindowBlurredFlag),this.on(document,"uiBalloonAnimationRequested",this.requestAnimation.bind(this,!1))}),this.before("teardown",function(){this.cleanUpBalloons()})}var defineComponent=require("core/component"),random=require("app/utils/random"),params=require("app/utils/params");module.exports=defineComponent(BalloonsAnimation)
});

Mavrikii, кул , благодарю

до этого мне гугл ещё выдал нечто на чистом css (вроде) Ссылка
думаю если там покрутить можно их и дальше разлетаться научить...
(хотя и так неплохо)

Цитата:

до этого мне гугл ещё выдал нечто на чистом css (вроде)

там строго заданное движение, случайность не получится чистым CSS.

Друзья, кто разбирается в хтмл, его нужно удалять в пшп или нет?

vikt88 - по желанию, хотите - удаляйте, хотите - нет. Но если не начнёте учить HTML, то что пытаетесь сделать никогда не сделаете - гарантирую.

Просьба подсказать, как в этом файле (архив) сделать, чтобы верхний рейтинг был по центру, а не слева. И как выравнить текст по центру звёзд (вертикально)?
Рейтинг ниже получилось выравнить только за счёт установки фиксированной ширины.

WONDROUS

в браузере такое:

OLEX
Да, в Safari и Chrome почему-то такой вид, а в Firefox 42 (им пользуюсь) нормально показывается.
Похоже сам стек (плагин) рейтинга глючный, тогда вопрос отменяется, спасибо.

Цитата:

Похоже сам стек (плагин) рейтинга глючный, тогда вопрос отменяется,

глюков нет, он просто пытается загрузить .json файл с диска, что во многих браузерах запрещено.


Цитата:

jquery-2.2.2.min.js:4 XMLHttpRequest cannot load file:///C:/temp/rateit/files/stacks_in_2_page0_VoteData.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Mavrikii
Точно, на сервере не проверял его, но как-то странновато он учитывает голоса.